html - 在 DIV 中垂直对齐文本的问题

Question

你好，你知道为什么垂直对齐(4 个深色 DIV 中的文本)在我的情况下不起作用，尽管 vertical-align: middle; 和 display: table-cell; 谢谢 http://jsfiddle.net/ymE8R/1/

.block {
    background: red;
    width:90%;
    Height: 200px;
}
.col1, .col2, .col3, .col4 {
    float: left;
    width: 25%;
    background: red;
    text-align: center;
    font-size: 12px;
    color: #fff;
    font-weight: 300;
    height: 24px;
    vertical-align: middle;
    display: table-cell;
}

Answer 1

通过 float 封装的 div，您使它们成为 block 级元素。根据the MDN :

On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

因此，声明一个与封装 div 一样高的 line-height 属性:

.col1, .col2, .col3, .col4 {
    height: 24px;
    line-height: 24px;
}

这会导致这些列中的文本在 div 中垂直居中:

Fiddle here .