CSS-свойство vertical-align управляет вертикальным выравниванием встроенных элементов (inline), таких как текст и изображения, относительно базовой линии родительского блочного элемента или ячейки таблицы в ряду.

Значение по умолчанию: baseline
Применяется к: Строчные элементы и ячейки таблиц (table cells)
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: CSS 1, 2, 3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | percentage | initial | inherit

Примеры написания кода свойства vertical-align:

img {
    vertical-align: middle;
}
span {
    vertical-align: super;
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение Описание
baseline Устанавливает выравнивание элемента по базовой линии родительского блока.
sub Устанавливает выравнивание элемента по подстрочной линии родительского блока.
super Устанавливает выравнивание элемента по надстрочной линии родительского блока.
top Устанавливает выравнивание элемента по верхней линии родительского блока.
text-top Устанавливает выравнивание элемента по верхней линии шрифта родительского блока.
middle Устанавливает выравнивание элемента на половину высоты родительского блока.
bottom Устанавливает выравнивание элемента по нижней линии родительского блока.
text-bottom Устанавливает выравнивание элемента по нижней линии шрифта родительского блока.
length Значение может быть указано в px, pt, cm, em и т. д. Числовое значение увеличивает или уменьшает поле на это расстояние от базовой линии его родителя. Значение 0px совпадает с baseline.
percentage Числовое значение увеличивает или уменьшает поле на расстояние, вычисленное процентного соотношения элемента line-height. Значение 0% совпадает с baseline.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента vertical-align.

Поддержка браузеров

Свойство vertical-align поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.