vertical-align

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

Краткая информация

Значение по умолчанию baseline
НаследуетсяНет
ПрименяетсяК строчным элементам или ячейкам таблицы
АнимируетсяДа

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top| 
  <размер> | <проценты>
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

ЗначениеОписаниеВид
baselineВыравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница. ЗаголовокТекст
bottomВыравнивает низ блока по нижней части строки.ЗаголовокТекст
middleВыравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x».ЗаголовокТекст
subОпускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста.ЗаголовокТекст
superПоднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста.ЗаголовокТекст
text-bottomНижняя граница элемента выравнивается по нижнему краю содержимого родителя.ЗаголовокТекст
text-topВерхняя граница элемента выравнивается по верхнему краю содержимого родителя.ЗаголовокТекст
topВыравнивает верх блока по верхней части строки.ЗаголовокТекст

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

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

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

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vertical-align</title> <style> .tex { font-size: 2rem; } .tex sub { vertical-align: sub; font-size: 1.8rem; } .tex sup { vertical-align: 5px; font-size: 1.6rem; } </style> </head> <body> <div class="tex"> T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X </div> </body> </html>

Результат данного примера показан на рис. 1.

Применение свойства vertical-align

Рис. 1. Применение свойства vertical-align

Объектная модель

Объект.style.verticalAlign

Спецификация

СпецификацияСтатус
CSS TransitionsРабочий проект
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация

Браузеры

4121411
1141

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.