vertical-align

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Част.	Част.	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

Част. — поддерживается частично.

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

CSS (ЦСС)	CSS (ЦСС)1
Значение по умолчанию	baseline
Наследуется	Нет
Применяется	К встроенным элементам или ячейкам таблицы.
Аналог ШТМЛ	<caption \| col \| colgroup \| tbody \| tfoot \| thead \| th \| td \| tr valign>

Описание

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

Синтаксис

Аргументы

baseline: Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom: Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle: Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub: Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super: Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom: Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top: Верхняя граница элемента выравнивается по самому высокому контентовому элементу текущей строки.
top: Выравнивание верхнего края элемента по верху самого высокого элемента строки.

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

Пример

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!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=utf-8">
  <title>vertical-align</title>
 </head>
 <body>
  
  <div style="font-family: Times, serif; font-size: 200%">
  T<span style="vertical-align: sub">E</span>X и L<span 
  style="vertical-align: 5px; font-size: 80%">A</span>T<span 
  style="vertical-align: sub">E</span>X
  </div>
  
 </body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра vertical-align

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

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