vertical-align
vertical-align
| Браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 2.0 | 3.0 | 1.7 | 1.0 | 2.0 | 3.0 |
| Поддерживается | Част. | Част. | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
Част. — поддерживается частично.
Краткая информация
| CSS | CSS1 |
|---|---|
| Значение по умолчанию | baseline |
| Наследуется | Нет |
| Применяется | К встроенным элементам или ячейкам таблицы. |
| Аналог HTML | <caption | col | colgroup | tbody | tfoot | thead | th | td | tr valign> |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align |
Описание
Выравнивает элемент по вертикали относительно своего родителя или окружающего
текста.
Синтаксис
vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top
| top | значение | проценты
Аргументы
- baseline
- Выравнивает базовую линию текущего элемента по базовой линии родителя. Если
родительский элемент не имеет базовой линии, то за нее принимается нижняя
граница элемента. - bottom
- Выравнивает основание текущего элемента по нижней части элемента строки,
расположенного ниже всех. - middle
- Выравнивание средней точки элемента по базовой линии родителя плюс половина
высоты родительского элемента. - sub
- Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта
при этом не меняется. - super
- Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта
остается прежним. - text-bottom
- Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
- text-top
- Верхняя граница элемента выравнивается по самому высокому текстовому элементу
текущей строки. - top
- Выравнивание верхнего края элемента по верху самого высокого элемента строки.
В качестве значения также можно использовать проценты, пикселы или другие доступные
единицы. Положительный аргумент смещает элемент вверх относительно базовой линии,
в то время как отрицательное значение опускает его вниз. Не все браузеры поддерживают
такой способ записи, в частности, Internet Explorer только с шестой версии.
Пример
<!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-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. Применение параметра vertical-align
Объектная модель
[window.]document.getElementById("elementID").style.verticalAlign