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