Синтаксис
vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top
| top | inherit | значение | проценты
Значения
- 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=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. Применение свойства vertical-align
Объектная модель
[window.]document.getElementById("elementID").style.verticalAlign
|
