vertical-align

Свойство 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> в строке текста:

<p>
top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
super:<img style="vertical-align:super" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
sub:<img style="vertical-align:sub" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
</p>
<p>
text-top:<img style="vertical-align:text-top" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
text-bottom:<img  style="vertical-align:text-bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/>
0.2em:<img style="vertical-align:0.2em" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
-1em:<img  style="vertical-align:-1em" src="https://mdn.mozillademos.org/files/15189/star.png"/>
20%:<img style="vertical-align:20%" src="https://mdn.mozillademos.org/files/15189/star.png"/> 
-100%:<img  style="vertical-align:-100%" src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>

#* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 .5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

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

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

table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table, th, td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

Синтаксис

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

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

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

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

baseline

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

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

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

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; }

Результат

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

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

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

• line-height, text-align, margin
• Understanding vertical-align, or "How (Not) To Vertically Center Content"
• All You Need To Know About Vertical-Align