vertical-align

Обновлено: 01.06.2022

vertical-align

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

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

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

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|
<размер> | <проценты>

Значения

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

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

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

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

Пример

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

Объект.style.verticalAlign

Браузеры

vertical-align

Посмотреть совместимость на Can I use?

vertical-align