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

如果您 float 元素，您将失去表格单元格状态。

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