CSS свойство vertical-align

CSS свойства

Определение и применение

CSS свойство vertical-align определяет вертикальное позиционирование встроенных строчных (inline) элементов или ячеек таблицы (table-cell).

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
vertical-align1.01.04.01.04.012.0

CSS синтаксис:

vertical-align:"baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit";

JavaScript синтаксис:

object.style.verticalAlign = "sub"

Значения свойства

ЗначениеОписание
baselineВыравнивает базовую линию текущего элемента по базовой линии родителя. Это значение по умолчанию.
lengthПоднимает или опускает базовую линию элемента на указанную величину относительно базовой линии родителя. Величина смещения указывается в единицах измерения, применяемых в CSS. При использовании положительного значения смещение происходит вверх, при отрицательном - вниз. Допускаются отрицательные значения
%Поднимает или опускает базовую линию элемента на указанную величину. Величина смещения в процентах расчитывается в зависимости от высоты строки (свойство line-height). При использовании положительного значения смещение происходит вверх, при отрицательном - вниз. Допускаются отрицательные значения
subВыравнивает элемент, как подстрочный (нижний индекс).
superВыравнивает элемент, как надстрочный (верхний индекс).
topВерх элемента выравнивается по верху самого высокого элемента в строке.
text-topВерх элемента выравнивается с верхом шрифта родительского элемента.
middleЭлемент размещается в середине родительского элемента.
bottomНиз элемента выравнивается с самым низким элементом в строке.
text-bottomНиз элемента выравнивается с низом шрифта родительского элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения*:

ЗначениеОписание
baselineВыравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
topВыравнивает содержимое ячейки вертикально по верхнему краю.
middleВыравнивает содержимое ячейки вертикально по середине.
bottomВыравнивает содержимое ячейки вертикально по нижнему краю.

* - Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Вертикальное позиционирование.</title>
<style> 
div {
width : 30%; /* задаём ширину блока */
}
img {
width : 75px; /* задаём ширину изображения */
height : 75px; /* задаём высоту изображения */
}
p {
background-color : orange; /* задаём задний фон для элемента <p> */
}
.top {
vertical-align : text-top; /* верх элемента выравнивается с верхом шрифта родительского элемента */
}
.bottom {
vertical-align : text-bottom; /* низ элемента выравнивается с низом шрифта родительского элемента */
}
</style>
</head>
	<body>
		<p>Baseline<img src = "nich.jpg" alt = "nich"></p>
		<p>Text-Top<img src = "nich.jpg" alt = "nich" class = "top"></p>
		<p>Text-Bottom<img src = "nich.jpg" alt = "nich" class = "bottom"></p>
	</body>
</html>
Пример вертикального позиционирования.
Пример вертикального позиционирования.
CSS свойства