vertical-align
Поддержка браузерами
12.0+ | 4.0+ | 1.0+ | 1.0+ | 4.0+ | 1.0+ |
Описание
CSS свойство vertical-align управляет вертикальным выравниванием строчных элементов и содержимого ячеек таблицы.
Если свойство применяется к строчному элементу, то оно влияет на выравнивание самого строчного элемента, а не его содержимого.
Если vertical-align применяется к ячейке таблицы, то оно влияет на выравнивание всего содержимого, расположенного в ячейке таблицы, а не на саму ячейку.
Допускается использование отрицательных значений.
Значение по умолчанию: | baseline (для строчных элементов), middle (для ячеек таблицы) |
---|---|
Применяется: | к строчным элементам (inline, inline-block) и ячейкам таблицы (table-cell) |
Анимируется: | да |
Наследуется: | нет |
Версия: | CSS1 |
Синтаксис JavaScript: | object.style.verticalAlign="bottom" |
Синтаксис
vertical-align: baseline|величина|sub|super|top|text-top|middle|bottom|text-bottom|inherit;
Значения свойства для строчных элементов
Значение | Описание |
---|---|
baseline | Базовая линия элемента выравнивается относительно базовой линии родительского элемента. |
sub | Выравнивает элемент по типу нижнего индекса. |
super | Выравнивает элемент по типу верхнего индекса. |
text-top | Выравнивает верхний край элемента относительно верхнего края шрифта родительского элемента. |
text-bottom | Выравнивает нижний край элемента относительно нижнего края шрифта родительского элемента. |
middle | Выравнивает середину элемента относительно базовой линии родительского элемента. |
top | Выравнивает верхний край элемента относительно верха самого высокого элемента в строке. |
bottom | Выравнивает нижний край элемента относительно нижнего края элемента, расположенного ниже всех в строке. |
величина | Смещает базовую линию текущего элемента на указанную величину вверх/вниз относительно базовой линии родителя. Величина смещения указывается в единицах измерения, используемых в CSS. Величина указанная в процентах вычисляются относительно высоты строки (line-height) установленной для элемента. При использовании положительного значения, элемент смещается вверх, при использовании отрицательного – вниз. |
% | Смещает базовую линию элемента на указанную величину вверх/вниз относительно базовой линии его родительского элемента. Величина смещения указанная в процентах вычисляется в зависимости от высоты строки. При использовании положительного значения, элемент смещается вверх, при использовании отрицательного - вниз. |
Значения свойства для ячеек таблицы
Значение | Описание |
---|---|
top | Выравнивает содержимое относительно верхнего края ячейки. |
middle | Выравнивает содержимое относительно середины ячейки. |
bottom | Выравнивает содержимое относительно нижнего края ячейки. |
baseline (sub, super, text-top, text-bottom, величина, и %) | Базовой линией ячейки таблицы является базовая линия первой текстовой строки в ячейке. Если в ячейке нет никакой текстовой строки, то базовой линией является нижний край элемента, расположенного внутри ячейки. Базовая линия, имеющая максимальную дистанцию до верхнего края ячейки таблицы, является базовой линией для всей строки. Значение baseline используется для выравнивания содержимого нескольких ячеек (для которых установлено выравнивание по базовой линии) по одной базовой линии в строке. |
Пример
CSS Свойство:
vertical-align:
Результат:
Демонстрация свойства vertical-aligns.
CSS Код:
span#mySpan {
background-color: yellow;
vertical-align: baseline;
}
background-color: yellow;
vertical-align: baseline;
}