vertical-align

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Интерактивный пример

vertical-align: baseline; 
vertical-align: top; 
vertical-align: middle; 
vertical-align: bottom; 
vertical-align: sub; 
vertical-align: text-top; 
<section class="default-example" id="default-example"> <p> Align the star: <img id="example-element" src="/shared-assets/images/examples/star2.png" /> </p> </section> 
#default-example > p { line-height: 3em; font-family: monospace; font-size: 1.2em; text-decoration: underline overline; }

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

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

Синтаксис

css
/* Ключевые слова */ 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: revert; vertical-align: revert-layer; vertical-align: unset;

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

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

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

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

baseline

Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов, таких как <textarea>, не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.

sub

Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.

super

Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.

text-top

Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.

text-bottom

Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.

middle

Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).

<length>

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

<percentage>

Выравнивает базовую линию элемента относительно базовой линии родительского элемента со смещением на указанную в процентах величину (вычисляется относительно значения свойства line-height). Допустимы отрицательные значения.

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

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

top

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

bottom

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

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

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

baseline (и sub, super, text-top, text-bottom, <length>, и <percentage>)

Выравнивают базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.

top

Выравнивает верхнюю границу внутреннего отступа ячейки с верхним краем строки таблицы.

middle

Выравнивает внутреннее поля ячейки по центру относительно строки таблицы.

bottom

Выравнивает нижнюю границу внутреннего отступа ячейки с нижним краем строки таблицы.

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

Формальное определение

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

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

vertical-align = 
[first|last]||
<'alignment-baseline'>||
<'baseline-shift'>

<alignment-baseline> = 
baseline|
text-bottom|
alphabetic|
ideographic|
middle|
central|
mathematical|
text-top

<baseline-shift> = 
<length-percentage>|
sub|
super|
top|
center|
bottom

<length-percentage> = 
<length>|
<percentage>

Примеры

Основной пример

HTML

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

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

Результат

Вертикальное позиционирование строчного элемента

HTML

html
<p> top: <img style="vertical-align: top" src="star.png" alt="star"/> middle: <img style="vertical-align: middle" src="star.png" alt="star"/> bottom: <img style="vertical-align: bottom" src="star.png" alt="star"/> super: <img style="vertical-align: super" src="star.png" alt="star"/> sub: <img style="vertical-align: sub" src="star.png" alt="star"/> </p> <p> text-top: <img style="vertical-align: text-top" src="star.png" alt="star"/> text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/> 0.2em: <img style="vertical-align: 0.2em" src="star.png" alt="star"/> -1em: <img style="vertical-align: -1em" src="star.png" alt="star"/> 20%: <img style="vertical-align: 20%" src="star.png" alt="star"/> -100%: <img style="vertical-align: -100%" src="star.png" alt="star"/> </p>

Result

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

HTML

html
<table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> <p> Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое. </p> <p>Существует и другая теория, согласно которой это уже случилось.</p> </td> </tr> </table>

CSS

css
table { margin-left: auto; margin-right: auto; width: 80%; } table, th, td { border: 1px solid black; } td { padding: 0.5em; font-family: monospace; }

Результат

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

Specification
CSS Inline Layout Module Level 3
# propdef-vertical-align

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

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