Свойство 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>
Vertbaseline
Vertbottom
Vertmiddle
Vertsub
Vertsuper
Verttext-bottom
Verttext-top
Verttop

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

Свойство table-layout

Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.

Свойство flex-flow

Является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Свойство visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии э...

Свойство text-emphasis-style

Устанавливает вид маркеров над каждым символом текста. Такие маркеры обычно используются в азиатс...

Свойство z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном...