Вертикальное выравнивание: vertical-align

vertical-align

Поддержка браузерами
Настольные браузеры Chrome Firefox Internet Explorer Opera Safari
Базовая поддержка, версии браузеров 1.0 1.0 4.0 4.0 1.0
Мобильные браузеры Android Firefox Mobile IE Mobile Opera Mobile Safari Mobile
Базовая поддержка, версии браузеров 1.0 1.0 10 4 1.0
Свойство
vertical-align — это свойство которое задаёт вертикальное выравнивание текста
Наследование
Не наследуется. Это значит что стили применённые к родительскому элементу не передадутся потомкам
Применяется
К строчным элементам и ячейкам таблицы
Может принимать значения

baseline | sub | super | top | text-top | middle | textbottom | bottom | значение в абсолютных единицах | значение в относительных единицах | inherit

Для ячеек таблиц применются только эти значения:
baseline | top | middle | bottom

Значение по умолчанию
baseline
Правила записи
свойство: значение;
Примеры
<img src="square.png" alt="square" style="vertical-align: baseline;" />

<p>В этом примере изображение square выравнивается по базовой линии родителя, то есть абзаца.</p>

<span style="vertical-align: sub;">слова</span>

<p>Базовая линия этого слова чуть ниже базовой линии родителя, то есть абзаца</p>

<span style="vertical-align: super;">слова</span>

<p>Базовая линия этого слова чуть выше базовой линии родителя, то есть абзаца</p>

<img src="figure.png" alt="figure" style="vertical-align: top;" />

<p>В этом примере изображение circle1 выравнивается по верхней границе строки</p>

Я специально заключил слово и изображение в рамку, чтобы наглядно показать как работает значение этого свойства, в данном случае граница рамки не «заходит» на изображение, изображение находится чуть выше границы рамки.

<img src="figure.png" alt="figure" style="vertical-align: text-top;" />

<p>В этом примере изображение circle2 выравнивается по верхней границе рамки</p>

Я специально заключил слово и изображение в рамку, чтобы наглядно показать как работает значение этого свойства, в данном случае граница рамки «заходит» на изображение, изображение находится на одной линии с верхней границей рамки.

<img src="star.png" alt="star" style="vertical-align: middle;" />

<p>Это изображение star выравнивается по центру</p>

<img src="rectangle.png" alt="rectangle" style="vertical-align: text-bottom;" />

<p>В этом примере низ изображения rectangle1 выравнивается по нижней границе рамки</p>

Я специально заключил слово и изображение в рамку, чтобы наглядно показать как работает значение этого свойства, в данном случае граница рамки «заходит» на изображение, изображение находится на одной линии с нижней границей рамки.

<img src="rectangle.png" alt="rectangle" style="vertical-align: bottom;" />

<p>В этом примере низ изображения rectangle2 выравнивается по нижней границе строки</p>

Я специально заключил слово и изображение в рамку, чтобы наглядно показать как работает значение этого свойства, в данном случае граница рамки не «заходит» на изображение, изображение находится чуть ниже нижней границы рамки.

<span style="vertical-align: 10px;">Этот текст имеет вертикальное выравнивание 10px</span>

<p>Этот текст имеет вертикальное выравнивание 10px от базовой линии родителя, то есть абзаца</p>

<span style="vertical-align: 10%;">Этот текст имеет вертикальное выравнивание 10%</span>

<p>Этот текст имеет вертикальное выравнивание 10% от значения свойства line-height</p>

vertical-align: inherit; Это значит что свойство наследует значение от родителя
Поделиться