Выдать вертикальное выравнивание текста в DIV

Question

Здравствуйте вы знаете, почему вертикальное выравнивание (текст в 4 темных DIVs) не работает в моем случае, несмотря на 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, будет выравниваться по вашему желанию.

В этом случае добавьте line-height:24px; в .col1, .col2, .col3, .col4 {} в css.

Fiddle here.

Answer 2

Плавая инкапсулирующие divs, вы сделали их Уровень блока элементов. Согласно the MDN: :

На элементах уровня блока свойство CSS высотой строки определяет минимальную высоту строк строки внутри элемента.

Таким образом, объявить line-height свойство, которое так высоко, как инкапсулирующего DIV:

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

Это приводит к тексту внутри этих колонн центрируется по вертикали в пределах DIV:

Fiddle here.