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 может использоваться в двух контекстах:

Следует иметь в виду, что свойство 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

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

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

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

baselinesub, 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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
vertical-align
baseline
bottom
middle
sub
super
text-bottom
text-top
top

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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