Выравнивает элемент по вертикали относительно своего родителя или окружающего текста.
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;
}
