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: baseline;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

vertical-align: sub;

vertical-align: text-top;


  

    Align the star:
    
  




#default-example > p {
  line-height: 3em;
  font-family: monospace;
  font-size: 1.2em;
  text-decoration: underline overline;
}

Свойство 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;

/* Значения длины () */
vertical-align: 10em;
vertical-align: 4px;

/* Процентные значения () */
vertical-align: 20%;

/* Глобальные значения */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

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

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

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

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

baseline

Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов, таких как