Свойство 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>Читайте также
Стили не содержащие указанный селектор
Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор....
Родственные селекторы
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем б...
Стиль подсказывающего текста
Псевдоэлемент, который используется для вывода контента после содержимого элемента, к которому он добавляется. Псевдоэлемент ::placeholder работает со...
Свойство text-fill-color
Устанавливает цвет заливки символов текста. Браузеры при наличии color игнорируют его и отдают предпочтение text-fill-color.
text-fill-color об...