Свойство vertical-align
Описание
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Синтаксис
vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | размер | проценты;Подробности
| Значение | Описание |
| baseline | Выравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница. |
| bottom | Выравнивает низ блока по нижней части строки. |
| middle | Выравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x». |
| sub | Опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста. |
| super | Поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста. |
| text-bottom | Нижняя граница элемента выравнивается по нижнему краю содержимого родителя. |
| text-top | Верхняя граница элемента выравнивается по верхнему краю содержимого родителя. |
| top | Выравнивает верх блока по верхней части строки. |
Пример
<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div>
Vert<span style='font-size: 13px; vertical-align: baseline'>baseline</span>
<br />
Vert<span style='font-size: 13px; vertical-align: bottom'>bottom</span>
<br />
Vert<span style='font-size: 13px; vertical-align: middle'>middle</span>
<br />
Vert<span style='font-size: 13px; vertical-align: sub'>sub</span>
<br />
Vert<span style='font-size: 13px; vertical-align: super'>super</span>
<br />
Vert<span style='font-size: 13px; vertical-align: text-bottom'>text-bottom</span>
<br />
Vert<span style='font-size: 13px; vertical-align: text-top'>text-top</span>
<br />
Vert<span style='font-size: 13px; vertical-align: top'>top</span>
</div>
</body>
</html>Читайте также
Свойство margin-top
Устанавливает величину отступа от верхней границы текущего элемента до внутренней границы его родительского элемента....
Свойство bottom
Устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов.
Отсчёт координат зависит от свойства position.
Свойство flex-direction
Задаёт направление основных осей в контейнере. Определяет положение флексов в контейнере. На направление также влияет значение атрибута dir у контейне...
Свойство border-image
Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не в...