Как выровнять в середине HTML-Div? - PullRequest
Новая
       3

Как выровнять в середине HTML-Div?

0 голосов
/ 13 октября 2011

Я искал это в Google, и он говорит, что код CSS margin: 0 auto;.Я попробовал это, и это не работает для меня.Пожалуйста помоги.Заранее спасибо.

login.html

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Log In</title>
 <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
 <div id="formLogin">
    <table class="formTable">
        <tr>
            <td>Username: </td>
            <td> <input type="text" id="loginusername" name="loginusername"/>  </td>
        </tr>

        <tr>
            <td>Password: </td>
            <td> <input type="password" id="loginpassword" name="loginpassword"/>  </td>
        </tr>

    </table>

    <div align="center">
        <input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
        <input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
    </div>
 </div>

</body>
</html>

stylesheet.css

table.formTable {
 margin-left: auto;
 margin-right: auto;
}

table.formTable td {
 padding: 8px;
}

#formLogin {
 width: 360px;
 background-color: #eeeeee;
 margin: 0 auto;
 padding: 20px;
 -moz-border-radius:    10px;
 -webkit-border-radius: 10px;
 border-radius:         10px;
}

Ответы [ 3 ]

0 голосов
/ 13 октября 2011

Как говорит Хати, попробуйте text-align:center;, но вы также можете добавить это в свой CSS: 

body {
    width:100%;
}

Это даст вашей странице ширину, поэтому ваши элементы будут иметь ширину для использования.

Обновление:

Не понял, что вы хотели, чтобы он был также вертикально отцентрирован. Вы можете поместить все это в ячейку таблицы и использовать valign="middle" для центрирования.

0 голосов
/ 13 октября 2011

Я думаю, что это примерно DOCTYPE .Попробуй поставить DOCTYPE

HTML 5 

<!DOCTYPE HTML>
<html>

HTML 4 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
0 голосов
/ 13 октября 2011

Если вы хотите центрировать его по вертикали, попробуйте прочитать this .

Обновление:

Попробуйте этот кодКонечно, вы можете переместить CSS в ваш CSS-файл.Протестировано в IE9 и FF6: 

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Log In</title>
 <link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
#wrapper{
    background-color: #ccf;
    position: relative;
    text-align: left;
    width: 100%;
    height: 100%;
    margin: 0px auto;

    }
#content{   
    background-color: transparent;
    position: absolute;
    top: 40%;
    left: 0px;
    width: 100%;
    margin-top: auto;
    text-align: center;
    min-width: 900px; 
}
table.formTable {
 margin-left: auto;
 margin-right: auto;
}

table.formTable td {
 padding: 8px;
}

#formLogin {
 width: 360px;
 background-color: #eeeeee;
 margin: 0 auto;
 padding: 20px;
 -moz-border-radius:    10px;
 -webkit-border-radius: 10px;
 border-radius:         10px;
}

</style>
</head>
<body>
<div id="wrapper">
    <div id="content">
 <div id="formLogin">
    <table class="formTable">
        <tr>
            <td>Username: </td>
            <td> <input type="text" id="loginusername" name="loginusername"/>  </td>
        </tr>

        <tr>
            <td>Password: </td>
            <td> <input type="password" id="loginpassword" name="loginpassword"/>  </td>
        </tr>

    </table>

    <div align="center">
        <input type="submit" id="btnlogin" name="btnlogin" value="Log In"/>
        <input type="submit" id="btncancelogin" name="btncancelogin" value="Cancel"/>
    </div>
 </div>
    </div>
</div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...