Шаблон:Vertical-align/doc

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

• Базовая линия — это воображаемая линия, проходящая по нижнему краю символов. Некоторые буквы (щ, ж, ц, у, д, р, ф) частично выходят за базовую линию.
• Если у элемента нет базовой линии (как, например, у изображений или блочных элементов), то в её роли выступает внешний край нижнего поля (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

См. также

• {{text-align}}
• {{Center}}