Свойство CSS  vertical-align описывает вертикальное позиционирование строчных элементов (inline) или ячеек таблицы (table-cell).

/* ключевые значения */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* значения длины (<length>) */
vertical-align: 10em;
vertical-align: 4px;

/* процентные значения (<percentage>) */
vertical-align: 20%;

/* глобальные значения */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Свойство vertical-align может использоваться в двух контекстах:

  • Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать <img> в строке текста:

  • Для вертикального позиционирования содержимого ячейки таблицы:

Обратите внимание: свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.

Начальное значениеbaseline
Применяется кстрочным элементам и ячейкам таблиц. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыотносятся к line-height самого элемента
Отображениевизуальный
Обработка значениядля процентов и значений длин, абсолютных длин или ключевых слов, если указаны
Animation typeдлина
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

Свойство vertical-align задается одним из ключевых значений, указанных ниже.

Значения для строчных элементов

Значения относительно родительского элемента

Данные значения позиционируют элемент по вертикали относительно родительского элемента:

baseline
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов, таких как <textarea>, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
sub
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
super
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
text-top
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
text-bottom
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
middle
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
<length>
Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
<percentage>
Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства line-height) над базовой линией родительского элемента. Допустимы отрицательные значения.

Значения относительно строки

Следующие значения позиционируют элемент по вертикали относительно всей строки:

top
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
bottom
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.

Для элементов, у которых нет базовой линии, вместо нее используется нижняя граница внешнего отступа (margin).

Значения для ячеек таблицы

baselinesub, super, text-top, text-bottom, <length>, и <percentage>)
Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
top
Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
middle
Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
bottom
Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.

Допустимы отрицательные значения.

Формальный синтаксис

baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

Пример

HTML

<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div>
<div>Изображение <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div>
<div>Изображение <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div>
<div>Изображение <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по центру.</div>

CSS

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

Результат

Спецификации

Спецификация Статус Комментарий
CSS Transitions
Определение 'vertical-align' в этой спецификации.
Рабочий черновик Определяет vertical-align как анимируемый.
CSS Level 2 (Revision 1)
Определение 'vertical-align' в этой спецификации.
Рекомендация Добавляет значение <length> и позволяет применять его к элементам с типом table-celldisplay.
CSS Level 1
Определение 'vertical-align' в этой спецификации.
Рекомендация Изначальное определение.

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: KTatyana, Sebastianz, tyv, s1lver, ZoRDoK
Обновлялась последний раз: KTatyana,