如何在html div的中间对齐？

Question

我一直在谷歌寻找这个，它说的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;
}

Answer 1

如果要垂直居中，也可以尝试阅读此内容。

更新：

试试这个代码。 当然，您可以将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>

Answer 2

就像Hachi所说的，尝试text-align:center; 但您也可以将其添加到CSS中：

body {
    width:100%;
}

这将为您的页面提供一个宽度，因此您的元素将具有使用的宽度。

更新：

没意识到您也希望它垂直居中。 您可以将整个内容放在一个表格单元格中，然后使用valign="middle"将其居中。

Answer 3

我认为这与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>

如何在html div的中间对齐？

问题描述

3 个解决方案

解决方案1
0 已采纳 2011-10-13 08:22:33

解决方案2
0 2011-10-13 08:23:08

解决方案3
0 2011-10-13 08:49:47

如何在html div的中间对齐？

问题描述

3 个解决方案

解决方案1 0 已采纳 2011-10-13 08:22:33

解决方案2 0 2011-10-13 08:23:08

解决方案3 0 2011-10-13 08:49:47

解决方案1
0 已采纳 2011-10-13 08:22:33

解决方案2
0 2011-10-13 08:23:08

解决方案3
0 2011-10-13 08:49:47