gpt4 book ai didi

html - CSS 中的垂直和水平对齐

转载 作者:太空宇宙 更新时间:2023-11-04 00:02:01 25 4
gpt4 key购买 nike

我在让我的表单垂直和水平对齐时遇到问题。

我不介意这是否不支持 IE——我计划实现一个 IE 检测脚本来告诉用户使用不同的浏览器——但必须支持 Firefox 和 Chrome。

这是我目前拥有的:

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;
}

感谢任何帮助。谢谢

最佳答案

你想要这样的东西吗?

试试这个 CSS

#login{
position:absolute;
left:50%;
top:50%;

margin-left:-120px;
margin-top:-60px;

border:1px solid #ccc;
width:240px;
height:120px;
}

如果你想要一个垂直和水平居中的表单,你可以使用css attribute position:absolute;然后使用 left:50%; top:50% 将 div 的左上角与浏览器的中心对齐。但是你的 Div 看起来不会以此为中心。因为它的左上角以窗口为中心。我只是使用负边距和 div 宽度和高度的一半来正确居中。

希望这就是您要找的。

感谢 Bojangles 的建议!

关于html - CSS 中的垂直和水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16341245/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com