vertical-align

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

Краткая информация

CSS	CSS1+
Значение по умолчанию	baseline
Наследуется	Нет
Применяется	К встроенным элементам или ячейкам таблицы.
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Синтаксис

Аргументы

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

bottom - Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.

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

sub - Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.

super - Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.

text-bottom - Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.

text-top - Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.

top - Выравнивание верхнего края элемента по верху самого высокого элемента строки.

inherit - Наследует значение родителя.

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

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

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

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

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

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

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

      <title>vertical-align</title>

  </head>

  <body>

    <div style="font-size: 2em">

    T<span style="vertical-align: sub">E</span>X и L<span style="vertical-align: 5px; font-size: 0.8em">A</span>T<span style="vertical-align: sub">E</span>X
    

    </div>

    </body>

    </html>

Демонстрация примера

Объектная модель

[window.]document.getElementById("elementID").style.verticalAlign

Примечание

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

vertical-align

Категории

Последние комментарии

	Русский
	English