问题是在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

通过浮动封装div，您已经使它们成为块级元素。根据{{​​3}}：

  

在块级元素上，行高CSS属性指定元素中行框的最小高度。

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

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

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

the MDN

Answer 2

如果添加的行高等于div的高度，它将根据需要对齐。

在这种情况下，请在{css。

中将line-height:24px;添加到.col1, .col2, .col3, .col4 {}

小提琴here。