Свойство 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>Читайте также
Свойство grid-template-areas
Определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.
Повторение названия области приводит к тому, ч...
Свойство page-break-after
Добавляет разрыв страницы при печати документа после заданного элемента....
Свойство column-span
Определяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колонок или только одну из них. Обычно, его применяют для ...
Функция radial-gradient()
Функция добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не ...