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

css-свойство vertical-align (от англ. vertical align – вертикальное выравнивание) используется для управления вертикальным выравниванием строчных элементов относительно своего родителя, окружающего текста, а также содержимого ячеек таблицы.

Базовая линия шрифта (от англ. baseline – основание, базовый уровень) воображаемая горизонтальная прямая линия, которая проходит по нижнему краю прямых знаков без учета свисаний и нижних выносных элементов. Таким образом, символы текста стоят на базовой линии, а нижние выносные элементы как бы свисают с нее.

Характеристики

Значение по умолчанию: baseline.
Применяется: к строчным элементам и ячейкам таблицы.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.verticalAlign="value".

Синтаксис

Значения

Для строчных элементов свойство vertical-align может принимать значения:

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

Для ячеек таблицы значения свойства vertical-align имеют несколько другой смысл.

top – содержимое ячейки будет выравниваться относительно верхнего края ячейки.
middle – содержимое ячейки будет выравниваться относительно середины ячейки.
bottom – содержимое ячейки будет выравниваться относительно нижнего края ячейки.
baseline – базовая линия ячейки будет выравниваться относительно базовой линии первой текстовой строки (за базовую линию всей строки принимается базовая линия элемента строки, которая больше всех удалена от верхнего края ячейки), если текстовое содержимое в ячейке отсутствует, то за базовую линию принимается нижний край того элемента ячейки, который больше всех удален от верхнего края ячейки. При этом все остальные значения свойства будут срабатывать как baseline.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/vertical-align

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div{
		width: 600px;
		padding: 5px;
		border: solid 2px blue;
		}
		
		.v_align_1{vertical-align: baseline;}
		.v_align_2{vertical-align: sub;}
		.v_align_3{vertical-align: super;}
		.v_align_4{vertical-align: top;}
		.v_align_5{vertical-align: 4px;}
		.v_align_6{vertical-align: -50%;}
		.v_align_7{vertical-align: bottom;}
		
	</style>
	
</head>
<body>

	<div>
		<span class="v_align_1">1-я строка: Выравнивание baseline.</span>
		<span class="v_align_2"> Выравнивание sub.</span>
		<span class="v_align_3"> Выравнивание super.</span> <br>
		<span class="v_align_1">2-я строка: Выравнивание baseline.</span>
		<span class="v_align_4"> Выравнивание top.</span>
		<span class="v_align_5"> Выравнивание 4px.</span> <br>
		<span class="v_align_1">3-я строка: Выравнивание baseline.</span>
		<span class="v_align_6"> Выравнивание -50%.</span>
		<span class="v_align_7"> Выравнивание bottom.</span>
	</div>
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №2</title>
	
	<style>
	
		table{
		border-collapse: collapse;
		}
		
		table, td{
		border: 1px solid;
		}

		.big_size{
		font-size: 40px;
		}		
		
		.v_align_1{vertical-align: top;}
		.v_align_2{vertical-align: middle;}
		.v_align_3{vertical-align: bottom;}
		.v_align_4{vertical-align: baseline;}
		
	</style>
	
</head>
<body>

	<table>
		
		<tr class="v_align_1">
			<td><span class="big_size">1-я строка</span></td>  <td>top</td>
		</tr>
		
		<tr class="v_align_2">
			<td><span class="big_size">2-я строка</span></td>  <td>middle</td>
		</tr>
		
		<tr class="v_align_3">
			<td><span class="big_size">3-я строка</span></td>  <td>bottom</td>
		</tr>
		
		<tr class="v_align_4">
			<td><span class="big_size">4-я строка</span></td>  <td>baseline</td>
		</tr>
		
	</table>
	
</body>
</html>

Пример №2