Свойство CSS vertical-align

vertical-align — это CSS-сокращённое свойство, задающее вертикальное выравнивание строчного, строчно-блочного или табличного блока ячейки.

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• alignment-baseline
• baseline-source
• baseline-shift

Попробуйте

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) вместо соответствующих свойств с полной записью, если только вам не нужно независимо управлять их каскадированием или поддерживать устаревшие реализации SVG (для элементов SVG).

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

Синтаксис

/* Keyword values */
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> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
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».

<length>

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

<percentage>

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

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

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

top

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

bottom

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

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

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

baseline (а также sub, super, text-top, text-bottom, <length> и <percentage>)

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

top

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

middle

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

bottom

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

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

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

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

vertical-align = 
  baseline |
  sub |
  super |
  text-top |
  text-bottom |
  middle |
  top |
  bottom |
  <percentage> |
  <length>

Примеры

Базовый пример

HTML

<div>
  An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with
  a default alignment.
</div>
<div>
  An
  <img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a middle alignment.
</div>

CSS

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

Результат

Вертикальное выравнивание в линейном блоке

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>

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

img {
  margin-right: 0.5em;
}

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

Результат

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

В этом примере показана таблица с одной строкой, содержащей шесть ячеек. В строке для свойства vertical-align задано значение bottom по умолчанию.

• В первых четырёх ячейках заданы собственные значения vertical-align, которые переопределяют значение строки.
• В пятой ячейке значение vertical-align не задано, поэтому она наследует значение строки.

Шестая ячейка нужна только для того, чтобы ячейки были достаточно высокими и эффект был заметен.

HTML

<table>
  <tbody>
    <tr class="bottom">
      <td class="baseline">baseline</td>
      <td class="top">top</td>
      <td class="middle">middle</td>
      <td>bottom</td>
      <td>Row's style</td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
        pretium felis eu sem mattis vulputate.
      </td>
    </tr>
  </tbody>
</table>

CSS

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

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

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

.bottom {
  vertical-align: bottom;
}

.baseline {
  vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

Результат

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

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

См. также

• Типичные сценарии использования flexbox, раздел «Центрирование элемента»
• line-height, text-align, margin
• Разбираемся в vertical-align, или «Как (не) выравнивать содержимое по вертикали»
• Vertical-Align: всё, что нужно знать