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

如果您想垂直居中，请尝试阅读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>

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 个答案: