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>

为什么在此示例中vertical-align不起作用？我该怎么做？我不想在px中使用margin，padding和set height。这可能吗？

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

Fiddle

此解决方案不使用display:table和display:table-cell作为display:table，而display:table-cell不是浏览器友好的，某些较旧的浏览器不支持

如何使用vertical-align：middle

6 个答案: