文本对齐垂直在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;
}