css-vertical-align

  • 08.07.2026
  • admin
  • 1минут читать

<vertical-align>

CSS CSS1
Значение по умолчанию baseline
Наследуется Нет
Применяется К встроенным элементам или ячейкам таблицы.
Аналог HTML <caption | col | colgroup | tbody | tfoot | thead | th | td | tr valign>
Ссылка на спецификацию https://www.w3.org/TR/CSS21/visudet.php#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 только с шестой версии.

Пример

Валидный CSS<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://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>

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

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

Текст

  • letter-spacing определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данный атрибут.
  • line-height устанавливает интерлиньяж (межстрочный интервал) текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.
  • text-align определяет горизонтальное выравнивание текста в пределах элемента.
  • text-decoration добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
  • text-indent устанавливает величину отступа первой строки блока текста (например, для параграфа P). Воздействия на все остальные строки не оказывается.
  • text-transform управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.
  • vertical-align выравнивает элемент по вертикали относительно своего родителя или окружающего текста.
  • white-space устанавливает, как отображать пробелы между словами.
  • word-spacing устанавливает интервал между словами. Если установлен параметр выравнивания justify, то атрибут word-spacing не действует, поскольку интервал между словами будет установлен принудительно.