vertical-align

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

• Для вертикального выравнивания блока inline-level внутри его содержащего блока line box. Например, его можно использовать для вертикального позиционирования изображения в строке текста.
• Для вертикального выравнивания содержимого ячейки таблицы.

Обратите внимание, что vertical-align применяется только к элементам inline, inline-block и table-cell: вы не можете использовать его для вертикального выравнивания блочных элементов.

/* 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 = 
  [ 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

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

Результат

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

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

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

HTML

<table>
  <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>
</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, или «Как (не) центрировать содержимое по вертикали»
• Вертикальное выравнивание: всё, что вам нужно знать