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

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

Свойство border-top-style

Устанавливает стиль верхней границы элемента.

Свойство grid-auto-columns

Определяет размер любых автоматически созданных треков. Неявные треки создаются при явном позицио...

Свойство border-left

Позволяет одновременно установить толщину, стиль и цвет левой границы элемента.<br>Значения...

Свойство grid-template

Сокращение для grid-template-rows, grid-template-columns и grid-template-areas.

Правило @page

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