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

Выравнивает элемент по вертикали относительно своего родителя или окружающего текста.

CSS синтаксис

vertical-align: значение;

Возможные значения

Значение Описание
значение Поднимает (положительное значение) или опускает (отрицательное значение) элемент на заданное значение относительно базовой линии. В качестве значений используются допустимые единицы длины CSS - пиксели (px), пункты (pt), сантиметры (cm) и т.д. 0 равно значению baseline.
% Поднимает (положительное значение) или опускает (отрицательное значение) элемент на величину в процентах от значения свойства line-height. При этом 0% аналогично значению baseline.
baseline Значение по умолчанию. Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
sub Элемент выравнивается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super Элемент выравнивается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
top Верх элемента выравнивается по верху самого высокого элемента строки.
text-top Верх элемента выравнивается по верху шрифта родительского элемента.
middle Выравнивание средней точки элемента по середине родительского элемента.
bottom Низ элемента выравнивается по низу самого нижнего элемента строки.
text-bottom Низ элемента выравнивается по низу шрифта родительского элемента.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем вертикальное выравнивание изображения


img {
     vertical-align: text-top;
}