文本对齐垂直在div中不起作用？

Question

.st_content_heading{
width:500px;
height:250px;
background:red;
border:1px solid #ccc;
float:left;
margin:0px;
padding:0px;
display:table-cell;
vertical-align:middle;
}
<div class="st_content_heading" style="vertical-align:middle;">Content for  class "st_content_out" Goes Here</div>

Answer 1

如果浮动元素，则会丢失表格单元状态。

.st_content_heading{
width:500px;
height:250px;
background:red;
border:1px solid #ccc;
/* float:left; take this out */ 
margin:0px;
padding:0px;
display:table-cell;
vertical-align:middle;
}

Answer 2

此解决方案与我完美匹配。即使它是div中的链接或文本，这个CSS类也可以垂直对齐DIV中的内容

.verticalCenterDivText{
    height: 29px;
    line-height: 29px;
}

希望这有帮助。