User Avatar

Свойство 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>

Читайте также

Свойство justify-content

Определяет, как браузер распределяет пространство вокруг флекс - элементов вдоль главной оси контейнера....

Свойство color-scheme

Позволяет элементу указать, в каких цветовых схемах он может удобно отображаться.

Обычный выбор цветовых схем операционной системы: «светлый» и...

Правило @page

Правило @page позволяет задать значение полей при печати документа или для страниц, у которых тип носителя задан как print.

Для установки полей...

Свойство white-space

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб...