0

我无法让我的表单垂直和水平对齐。

我不介意这是否不支持 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;
}

任何帮助表示赞赏。谢谢

4

2 回答 2

3

你想要这样的东西吗？

试试这个 CSS

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

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

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

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

希望这是您正在寻找的。

感谢 Bojangles 的建议！

于 2013-05-02T15:26:04.453 回答
0

现在你的#login div 正在使用 100% 的页面宽度，你需要设置一个较小的宽度，以便它可以正确居中。您可以通过将顶部设置为 50% 减去 div 高度/2 来垂直居中。

像这样

#login
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    top: 50%;
    margin-top:-50px;
}
于 2013-05-02T15:32:53.630 回答