Документация

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

  • Базовая линия — это воображаемая линия, проходящая по нижнему краю символов. Некоторые буквы (щ, ж, ц, у, д, р, ф) частично выходят за базовую линию.
  • Если у элемента нет базовой линии (как, например, у изображений или блочных элементов), то в её роли выступает внешний край нижнего поля (margin-bottom).
  • Базовая линия ячейки таблицы — это базовая линия её первой строки текста или первого блока (смотря, что стоит в начале). Если такого текста или блока нет, то это низ ячейки.
  • Базовая линия ряда HTML-таблицы — это базовая линия, общая для всех ячеек этого ряда.
Формат
{{vertical-align| позиция }}

Параметр позиция может принимать значения:

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

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

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

Примеры

Для управления вертикальным выравниванием внутри таблицы свойство CSS vertical-align применяется непосредственно ко всей ячейке <td></td> или <th></th>:

Формат: <td style="vertical-align: {параметр} "> текст </td>
кодкак выглядит
<td style="vertical-align:bottom">Hello world</td> Hello world
<td style="vertical-align:middle">Hello world</td> Hello world
<td style="vertical-align:top">Hello world</td> Hello world

См. также