vertical-align

 
vertical-align - выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

Значения

baseline - выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom - выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub - элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super - элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom - нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top - верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top - выравнивание верхнего края элемента по верху самого высокого элемента строки.

inherit - наследует значение свойства родительского элемента.

В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения:

baseline - выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom - выравнивает по нижнему краю ячейки.
middle - выравнивает по середине ячейки.
top - выравнивает содержимое ячейки по ее верхнему краю.

Пример использования

th {vertical-align: bottom}

Характеристики

1. Применяется к встроенным элементам или ячейкам таблицы.
2. Значение по умолчанию: baseline
3. Не наследуется.

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты

Версии CSS

CSS 1
CSS 2
CSS 2.1
CSS 3

Смотрите также:

line-height

Нашли ошибку, опечатку, неточность, неактуальную или устаревшую информацию? Пишите.