Перейти к содержанию

vertical-align

Свойство vertical-align выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

Демо

Колонки и таблицы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
/* keyword values */
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;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Значения

baseline

Выравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница.

bottom

Выравнивает низ блока по нижней части строки.

middle

Выравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x».

sub

Опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста.

super

Поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста.

text-bottom

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

text-top

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

top

Выравнивает верх блока по верхней части строки.

В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения:

baseline

Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.

bottom

Выравнивает по нижнему краю ячейки.

middle

Выравнивает по середине ячейки.

top

Выравнивает содержимое ячейки по её верхнему краю.

Значение по-умолчанию: baseline

Применяется к строчным элементам или ячейкам таблицы

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vertical-align</title>
        <style>
            .tex {
                font-size: 2rem;
            }
            .tex sub {
                vertical-align: sub;
                font-size: 1.8rem;
            }
            .tex sup {
                vertical-align: 5px;
                font-size: 1.6rem;
            }
        </style>
    </head>
    <body>
        <div class="tex">
            T<sub>E</sub>X и L<sup>A</sup>T<sub>E</sub>X
        </div>
    </body>
</html>

Комментарии