1

我将如何在中间水平/垂直设置 div？

到目前为止，这是我的代码：

HTML

<div id="outer">
    <div id="inner">
        <div id="signin_header">
        Sign in
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
}
html {
    display: table;
    margin: auto;
    height: 100%;
}
body {
    display: table-cell;
}
#outer {
    width: 100%;
    text-align: center;
    height: 100%;
}
#inner {
    display: inline-block;
    background-color: rgb(245, 245, 245);
    background-image: none;
    background-origin: padding-box;
    background-size: auto;
    border-bottom-color: rgb(229, 229, 229);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(229, 229, 229);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgb(229, 229, 229);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgb(229, 229, 229);
    border-top-style: solid;
    border-top-width: 1px;
    display: block;
    font-family: 'segoe ui', arial, helvetica, sans-serif;
    font-size: 13px;
    width: 300px;
    padding: 25px;
}
#signin_header {
    color: rgb(34, 34, 34);
    display: block;
    font-family: 'segoe ui', arial, helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    height: 16px;
    line-height: 16px;
    margin-top: 0px;
    width: 283px;
    text-align: left;
}

小提琴可以在这里找到

http://jsfiddle.net/yaFeD/

4

3 回答 3

1

假设您正在尝试使登录 div 居中（而不是字母本身），这是您需要的新 CSS，在您的 jsfiddle 中通过使用margin: 0 auto;并将position: relative;div 设置在该 div 的中间进行测试。

#signin_header {
    color: rgb(34, 34, 34);
    display: block;
    font-family: 'segoe ui', arial, helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    height: 16px;
    line-height: 16px;
    margin: 0 auto;
    position: relative;
    width: 283px;
}

编辑：我也把你text-align: left;带走了

于 2013-03-07T17:42:33.633 回答
1

这就是你所追求的吗？我想这就是你想要的？

html, body {
height: 100%;
}
html {
display: table;
margin: auto;
height: 100%;
}
body {
display: table-cell;
}
#outer {
width: 100%;
text-align: center;
height: 100%;
position:relative;
top:50%;
bottom:50%;
}
#inner {
display: inline-block;
background-color: rgb(245, 245, 245);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(229, 229, 229);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(229, 229, 229);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(229, 229, 229);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(229, 229, 229);
border-top-style: solid;
border-top-width: 1px;
display: block;
font-family: 'segoe ui', arial, helvetica, sans-serif;
font-size: 13px;
width: 300px;
padding: 25px;
}
#signin_header {
color: rgb(34, 34, 34);
display: block;
font-family: 'segoe ui', arial, helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
height: 16px;
line-height: 16px;
margin-top: 0px;
width: 283px;
text-align: left;
}

http://jsfiddle.net/EQjHz/

于 2013-03-07T17:49:31.033 回答
0

添加margin:auto;到内部 div 就可以了。当您只需要水平对齐时，只需添加margin-left:auto;margin-right:auto;. 同样对于垂直对齐，添加margin-bottom:auto;margin-top:auto;

于 2013-03-07T17:41:19.023 回答