Справочник HTML & CSS

vertical-align

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

Синтаксис

vertical-align: value;

Значения

Параметр	Тип	Описание
baseline	keyword	По базовой линии текста (по умолчанию).
middle	keyword	По середине строки или ячейки.
top \| bottom	keyword	По верхнему или нижнему краю.
sub \| super	keyword	Ниже или выше, как индекс или степень.

Примеры

Значок рядом с текстом:

<style>
  img { width: 40px; }
</style>
 
<p><img src="/media/photo-200x200.jpg" alt=""> baseline (default)</p>
<p><img src="/media/photo-200x200.jpg" alt="" style="vertical-align: middle;"> middle</p>

Содержимое ячеек таблицы:

<style>
  td { height: 60px; border: 1px solid gray; padding: 4px; }
</style>
 
<table><tr>
  <td style="vertical-align: top;">top</td>
  <td style="vertical-align: middle;">middle</td>
  <td style="vertical-align: bottom;">bottom</td>
</tr></table>

Примечания

На обычных блоках vertical-align не работает — для них используйте flexbox и align-items. Щель под картинкой внутри блока появляется из-за выравнивания по базовой линии; vertical-align: middle или display: block у картинки её убирают.

См. также

text-align — Выравнивание текста и строчного содержимого внутри блока по горизонтали.
align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.

Вопросы и ответы по теме

Как выровнять столбцы таблицы

В учебнике

Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.

Спасибо, что читаете!