垂直和水平在CSS中对齐 [英] Vertically and Horizontally Aligning in CSS
问题描述
我无法将我的表单在垂直和水平方向上对齐。
I'm having trouble getting my form to align both vertically and horizontally.
我不介意如果这不支持IE - 我打算实施IE检测脚本以告诉用户使用不同的浏览器 - 但是支持Firefox和Chrome是必须的。
I don't mind if this doesn't support IE--I plan on implementing an IE detection script to tell the user to use a different browser--but support for Firefox and Chrome is a must.
这里是我目前有的：
HTML
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="wrapper">
<div id="logo_div">
<img src="../images/logo.png" id="logo">
</div>
<div id="login">
<form name="searchform" action="checklogin.php" method="post" id="login_form">
<br>
User Name : <input type="text" name="myusername" size="16" /><br>
Password : <input type="password" name="mypassword" /><br>
<input type="submit" value="Login" /><br>
</form>
</div>
</div>
</div>
</body>
</html>
全局CSS
#wrapper {
position: relative;
max-width: 1024px;
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo_div {
position: relative;
margin-left: auto;
margin-right: auto;
}
#logo {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
索引CSS
#login {
position: relative;
margin-left: auto;
margin-right: auto;
}
#login_form {
position: relative;
margin-left: auto;
margin-right: auto;
}
任何帮助。
感谢
Any help is appreciated. Thanks
推荐答案
你想要这样吗？
试试这个css
#login{
position:absolute;
left:50%;
top:50%;
margin-left:-120px;
margin-top:-60px;
border:1px solid #ccc;
width:240px;
height:120px;
}
如果你想要一个表格垂直和水平居中，你可以使用css属性position ：绝对;然后使用左：50％; top：50％将div的左上角对齐到浏览器的中心。但你的Div不会看这个为中心。因为它的中心在窗口的左上角。
If you want a form centered vertically and horizontally, you can use css attribute position:absolute; and then use left:50%; top:50% to align the top-left corner of div to center of browser. But your Div will not look centered by this. because it is centered to window by its top left corner. I just used negative margin with half of width and height of div to center it properly.
希望这是您正在寻找的内容。
Hope this is what you are looking for.
感谢Bojangles，建议！
Thanks Bojangles, for suggestion !
这篇关于垂直和水平在CSS中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
