如何在html div中间对齐？
我一直在谷歌中寻找这个，它说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;
}
I've been looking for this in google and it says that the css code is margin: 0 auto;. I tried it and it doesn't work for me. Please help. Thanks in advance.
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;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您想将其垂直居中，请尝试阅读此。
更新：
试试这个代码。当然，您可以将 CSS 移出到您的 css 文件中。在 IE9 和 FF6 中测试：
If you want to center it vertically also try reading this.
Update:
Try this code. Of course you can move CSS out to your css file. Tested in IE9 and FF6:
就像 Hachi 所说，尝试
text-align:center;但您也可以将其添加到 CSS 中：这将为您的页面提供宽度，因此您的元素将有一个可以使用的宽度。
更新：
没有意识到你也希望它垂直居中。您可以将整个内容放入表格单元格中，并使用
valign="middle"将其居中。Like Hachi says try
text-align:center;but you could also add this to your CSS:This will give your page a width, so your elements will have a width to use.
Update:
Didn't realise you wanted it vertically centered too. You could put the whole thing in a table cell and use
valign="middle"to center it.我认为这与DOCTYPE有关。尝试将 DOCTYPE
HTML 5
HTML 4
I think it's about DOCTYPE. Have try to put DOCTYPE
HTML 5
HTML 4