Вертикально центрируемый текст

Question

Ссылка на мой jsbin

У меня неожиданная проблема. Я хотел бы вертикально центрировать текст "Thing2". Однако свойство css vertical-algin: middle, похоже, не работает.

Так что я хотел бы знать 2 вещи:

1. Почему это не работает?
2. Является ли способ, которым я делаю это (добавляя основной класс каждому классу стилей), самый простой способ сделать это?

Примечание Это всего лишь подтверждение концепции общей идеи, которая у меня есть. Поэтому очевидно, что имена классов и идентификаторы будут меняться.

Answer 1

Способ вертикального центрирования вещей - установить высоту строки в высоту контейнера.

Попробуйте добавить line-height: 87.5px к .about

.

Answer 2

Вы не можете вертикально выровнять текст таким образом, см. http://www.w3.org/wiki/CSS/Properties/vertical-align

Попробуйте вместо этого установить высоту строки в вашем контейнере div, равную высоте div, если вы просто хотите выровнять по вертикали одиночныйстрока текста.

например,

.metroSmall {
    line-height: 87.5px;
}

Это хороший пост, подробно описывающий несколько различных способов вертикального выравнивания HTML-элементов: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Если вы поддерживаете толькоВ последних браузерах вы также можете использовать новую таблицу и стили отображения ячеек таблицы, которые поддерживают вертикальное выравнивание так же, как таблицы.

например,

.metroSmall {
    display: table-cell;
    vertical-align: middle;
}

Помните об этомне будет работать в более ранних браузерах, таких как Internet Explorer 6.

Answer 3

Попробуйте использовать это http://jsfiddle.net/YUruZ/

Использовать стиль CSS display свойство table и table-cell