We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Свойство 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' в этой спецификации.
Рекомендация Изначальное определение.

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка1121441
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка11 Да4 Да1 Да

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

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

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