Статья нуждается в доработке и будет доработана через некоторое время.

Свойство vertical-align устанавливает вертикальное выравнивание текста.

Внимание! Свойство работает только для строчных элементов inline, строчно-блочных (inline-block) и для таблиц. Для блочных элементов работать не будет!

Синтаксис

Свойство может принимать одно из следующих значений: baseline, bottom, top, middle, sub, super, text-bottom, text-top, значение, проценты, inherit:

селектор {
	vertical-align: значение;
}

Значения

Значение Описание
baseline По базовой линии.
bottom По нижнему краю.
top По верхнему краю.
middle По центру.
sub Нижний индекс.
super Верхний индекс индекс.
text-bottom По самому нижнему краю строки.
text-top По самому верхнему краю строки.
значение Любые CSS единицы.
проценты В процентах.
inherit Наследует значение родителя.

Значение по умолчанию: middle.

Примеры

Значение middle

Обратите внимание на то, что vertical-align мы задаем тому, у кого текст больше по размеру (хотя интуитивно кажется, что нужно тому, у кого он меньше):

#span1 {
	vertical-align: middle; 
	font-size: 40px; 
	border: 1px solid green;
}
#span2 {
	border: 1px solid red;
}

Результат выполнения кода:

Span1 Span2

Значение baseline

#span1 {
	vertical-align: baseline; 
	font-size: 40px; 
	border: 1px solid green;
}
#span2 {
	border: 1px solid red;
}

Результат выполнения кода:

Span1 Span2

Значение bottom

Здесь vertical-align мы задаем тому, у кого текст меньше по размеру:

#span1 {
	font-size: 40px; 
	border: 1px solid green;
}
#span2 {
	vertical-align: bottom; 
	border: 1px solid red;
}

Результат выполнения кода:

Span1 Span2

Значение top

Здесь vertical-align мы задаем тому, у кого текст меньше по размеру:

#span1 {
	font-size: 40px; 
	border: 1px solid green;
}
#span2 {
	vertical-align: top; 
	border: 1px solid red;
}

Результат выполнения кода:

Span1 Span2

Значение text-top

#span1 {
	vertical-align: text-top;
	font-size: 40px;
	border: 1px solid green;
}
#span2 {
	border: 1px solid red;
}

Результат выполнения кода:

Span1 Span2

Значение text-bottom

#span1 {
	vertical-align: text-bottom; 
	font-size: 40px; 
	border: 1px solid green;
}
#span2 {
	border: 1px solid red;
}

Результат выполнения кода:

Span1 Span2

Значение sub

#span1 {
	vertical-align: sub; 
	font-size: 40px; 
	border: 1px solid green;
}
#span2 {
	border: 1px solid red;
}

Результат выполнения кода:

Span1 Span2

Значение super

#span1 {
	vertical-align: super; 
	font-size: 40px; 
	border: 1px solid green;
}
#span2 {
	border: 1px solid red;
}

Результат выполнения кода:

Span1 Span2