CSS vertical-align, примеры. Вертикальное выравнивание в html и таблицах (атрибут valign)

Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.

Синтаксис CSS vertical-align

...
vertical-align: value;
...

Где value может принимать следующие значения:

baseline - выравнивание по базовой линии предка (или просто нижняя граница родителя)
bottom - выравнивание по нижней части строки (или элемента, который располагается ниже всех)
middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
sub - отображение происходит под строкой (выглядит как подстрочный индекс)
super - отображение происходит над строкой (как верхний индекс)
text-bottom - выравнивание нижней границы элемента по нижнему краю строки
text-top - выравнивание верхняя границы элемента по верхнему краю строки
top - выравнивание верхняя края элемента по верху самого высокого элемента строки
inherit - наследует значение родителя
значение - указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
проценты - указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

baseline (для строчных элементов)
middle (для ячеек таблицы)

Вертикальное выравнивание в таблицах

Чаще всего vertical-align используется в ячейках таблиц. В теге <table> используют атрибут valign.

Синтаксис CSS valign для таблиц

<td valign="value">
или
<tr valign="value">

Где value может принимать следующие значения:

baseline - выравнивание по базовой линии первой текстовой строки
bottom - выравнивание по нижнему краю ячейки таблицы
middle - выравнивание по середине ячейки
top - выравнивание верхнему краю ячейки

Например:

<table>
	<tr>
		<td valign="top">
		Выравнивание по верху
		</td>
	</tr>
	<tr>
		<td valign="middle">
		Выравнивание по середине
		</td>
	</tr>
	<tr>
		<td valign="bottom">
		Выравнивание по низу
		</td>
	</tr>
</table>

Преобразуется на странице в следующее:

Выравнивание по верху

Выравнивание по середине

Выравнивание по низу

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub

<html>
<head>
<style>
	.vert_align_baseline{
	display: inline-block;
	vertical-align: baseline;
	background: #ccc;
	}
	.vert_align_top{
	display: inline-block;
	vertical-align: top;
	background: #ccc;
	}
	.vert_align_bottom{
	display: inline-block;
	vertical-align: bottom;
	background: #ccc;
	}
	.vert_align_sub{
	display: inline-block;
	vertical-align: sub;
	background: #ccc;
	}
	.vert_align_text_top{
	display: inline-block;
	vertical-align: top;
	background: #ccc;
	}
</style>
</head>
<body>
	<br/><span class="vert_align_baseline">Текст с выравниванием vert_align_baseline</span>
	<br/><span class="vert_align_bottom">Текст с выравниванием vert_align_bottom</span>
	<br/><span class="vert_align_top">Текст с выравниванием vert_align_top</span>
	<br/><span class="vert_align_sub">Текст с выравниванием vert_align_sub</span>
</body>
</html>

Пример 2. Значения vertical-align: абсолютные значения и проценты

Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.

<html>
<head>
<style>
	.vert_align_abs_plus{
	display: inline-block;
	vertical-align: 10px;
	background: #aaa;
	}
	.vert_align_abs_minus{
	display: inline-block;
	vertical-align: -5px;
	background: #aaa;
	}
	.vert_align_per_plus{
	display: inline-block;
	vertical-align: 50%;
	background: #aaa;
	}
	.vert_align_per_minus{
	display: inline-block;
	vertical-align: -30%;
	background: #aaa;
	}
</style>
</head>
<body>
	<br/><span class="vert_align_abs_plus">Текст с выравниванием на 10 пикселей вверх</span>
	<br/><span class="vert_align_abs_minus">Текст с выравниванием на 5 пикселей вниз</span>
	<br/><span class="vert_align_per_plus">Текст с выравниванием на 50% вверх</span>
	<br/><span class="vert_align_per_minus">Текст с выравниванием на 30% вниз</span>
</body>
</html>

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Примечание

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

object.style.verticalAlign="VALUE"

Читайте также:
• CSS border
• CSS background
• CSS transition
• Свойство display
• Свойство nth-child
• Свойство overflow
• Свойство text-indent

← Перейти в каталог CSS уроков