0

我想通过以下方式绝对化 div，但由于某种原因，Firefox 将 div 推到最顶部，因此它水平居中，但垂直居中。铬工作正常

HTML：

<body>
<div id="login">
            <div id="header">ict <span class="redText">recruit</span></div>
            <div id="wrapper">

                    <div class="page-header">
                        <h1>Login</h1>
                    </div>
                    <div id="loginBox">
                        <div class="control-group" id="Div1">

                            <div class="controls">
                                <label class="control-label" for="firstName1">Password</label>
                            </div>
                        </div>
                        <div class="control-group" id="firstName1g">
                            <label class="control-label" for="firstName1">Password</label>                
                        </div>
                    </div>
            </div>
</div>
</body>

CSS：

#login{
    position: relative;

    text-align:center;
    width: 100%;
    height: 100%;
    display: block;
}
#header {
    position:relative;
    text-align: left;
    padding-left: 50px;
    width: 100%;
    height: 50px;
    border-bottom: 3px solid #dc0000;
    font-family: Leelawadee, sans-serif;
    font-size: 30px;
    line-height: 50px;
}
.redText {
    color: rgb(220,0,0);
}
#wrapper {
    margin: 0 auto;
    position: relative;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;
    text-align: left;
}
div.page-header h1 {
    font-family: Leelawadee, sans-serif;
    font-weight: 300;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #dc0000;
}
#loginBox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 30px;
    background: #e5e5e5;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;

}
4

3 回答 3

1

摆脱包装纸上的负边距。将位置设置为绝对。调整顶部和左侧的百分比。

jsfiddle

CSS

#wrapper {
   margin: 0 auto;
   position: absolute;
   width: 400px;
   height: 400px;
   top: 50%;
   left: 30%;
   text-align: left;

}

于 2013-04-12T14:34:51.377 回答
1

作为一般规则，使用负边距是个坏主意……尤其是当它们影响 DOM 中的主要结构元素时。我建议您采用不同的方法来使您的#wrapperdiv 居中，就像我在这个小提琴http://jsfiddle.net/Uwsxu/2/中所做的那样

简而言之，去掉你的负边距和你的left:50%和top:50%

#wrapper {
    margin: 0 auto;
    position: relative;
    width: 400px;
    height: 400px;
    text-align: left;
}
于 2013-04-12T14:35:15.843 回答
1

就像墨菲斯说的：你没有把包装纸上的位置当成绝对的。

如果你想使用这个方法：

    margin: 0 auto;
    position: relative;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -200px;

那么位置应该是绝对的或固定的，而不是相对的。

因此，我建议以下内容使包装器居中：

#wrapper {
    margin: 0 auto;
    position: relative;
    width: 400px;
    height: 400px;
    top: 150px; (+ the 50px for the header, since it is relative to the header as well)
    text-align: left;
}
于 2013-04-12T14:35:37.903 回答