html - 如何使用垂直对齐：中间

Question

直播：http: //jsfiddle.net/8hAv3/

#main {
    width: 100px;
    height: 100px;
    background-color: red;
}
#sub {
    width: 100%;
    height: 100%;
    background-color: blue;
    vertical-align: middle;
}

<div id="main">
    <div id="sub">TEXT</div>
</div>

为什么在这个例子中垂直对齐不起作用？我怎样才能做到？我不想在 px 中使用边距、填充和设置高度。这可能吗？

Answer 1

这应该有效：

#main {
    width: 100px;
    height: 100px;
    background-color: red;
    display: table;
}
#sub {
    display: table-cell;
    height: 100%;
    width: 100%;
    background-color: blue;
    vertical-align: middle;
}

http://jsfiddle.net/8hAv3/2/

Answer 2

如果你只是想在一个固定高度的框中垂直居中文本，我会用line-height:100px它来做

Answer 3

你必须使用

display:table-row; 
display:table-cell; or 
display:table;

与垂直对齐样式一起，不确定它必须是哪个确切的显示值，但它必须是其中之一table。

Answer 4

您需要display:table在主容器和display:table-cell子容器上使用。此处说明：http: //jsfiddle.net/8hAv3/1/

Answer 5

你必须给元素#sub 一个行高，否则浏览器不知道垂直对齐它有多高。

Answer 6

只需给 div 一个line-height.

 #main {
    width: 100px;
    height: 100px;
    background-color: red;
}
#sub {
    width: 100%;
    height: 100%;
    background-color: blue;
    line-height:100px;
}

小提琴

此解决方案不使用display:table，并且display:table-cell由于浏览display:table器display:table-cell不友好，一些较旧的浏览器不支持