vertical-align
Свойство CSS vertical-align
описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (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
-
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов (en-US), таких как
<textarea>
(en-US), не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера. sub
-
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
super
-
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
text-top
-
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
text-bottom
-
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
middle
-
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
<length>
-
Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
<percentage>
-
Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства
line-height
) над базовой линией родительского элемента. Допустимы отрицательные значения.
Значения относительно строки
Следующие значения позиционируют элемент по вертикали относительно всей строки:
top
-
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
bottom
-
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.
Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).
Значения для ячеек таблицы
baseline
(иsub
,super
,text-top
,text-bottom
,<length>
, и<percentage>
)-
Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
top
-
Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
middle
-
Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
bottom
-
Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.
Допустимы отрицательные значения.
Формальный синтаксис
vertical-align =
[ (en-US) first | (en-US) last ] (en-US) || (en-US)
<'alignment-baseline'> || (en-US)
<'baseline-shift'>
Пример
HTML
<div>Изображение <img src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div>
<div>Изображение <img class="top" src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div>
<div>Изображение <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div>
<div>Изображение <img class="middle" src="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; }
Результат
Спецификации
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |
Совместимость с браузерами
BCD tables only load in the browser