Что такое vertical-align?

В CSS есть свойство vertical-align. Когда вы только узнаете о нем, то оно покажется довольно запутанным. Поэтому предлагаю вам пройтись вместе по правильному его использованию. Базовое применение такое:

img { 
  vertical-align: middle;
}

Обратите внимание, что в примере правило применяется к элементу img. Изображения являются инлайновыми элементами и находятся в одной строке с текстом, если это возможно. Но что значит “находятся в строке”? В этом месте и появляется vertical-align.

Допустимые значения: baseline (базовая линия), sub (нижний индекс), super (верхний индекс), top (верх), text-top (верх текста), middle (середина), bottom (низ), text-bottom (низ текста), точное значение или значение в процентах.

Путаница, по моему мнению, возникает когда вы пытаетесь применить вертикальное выравнивание к блоку с вложенными элементами и не видите никакого результата.

Если у вас есть небольшой блок, вложенный в блок побольше и вы хотите выровнять его по центру вертикально, то у вас ничего не выйдет.

Baseline

Значение по умолчанию у vertical-align (если вы не написали иного) — baseline. Изображение будет выстраиваться вместе с текстом по его базовой линии. Обратите внимание, что подстрочные элементы находятся ниже базовой линии, поэтому изображение не выстраивается по их уровню.

Middle

Пожалуй, самый распространенный способ использования свойства vertical-align. Выравнивает изображение по центру относительно текстовой базовой линии. Чаще всего результат будет кроссбрузерным.

Браузеры отлично справляются с вычислением высоты текста и изображения в пикселях и выравниванием картинки по центру.

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

Text-bottom

В отличии от baseline выравнивает элемент по нижнему краю текста, включая подстрочные элементы. Изображение выравнивается по нижним выступающим частям текста:

Text-top

Противоположно text-bottom, выравнивает элемент по самой высокой точке текущего шрифта. Например, на рисунке изображен шрифт Georgia и у него есть более высокие выступающие элементы, чем в написанном слове. Элемент выравнивается по ним. Отсюда небольшой зазор.

Top и Bottom

Top и bottom аналогичны text-top и text-bottom, но выравнивание не ограничивается текстом. Например, если два изображения разного размера стоят в ряд с текстом, то их вершины (или основания) будут выровнены вне зависимости от текста.

Sub и Super

Эти значения отвечают за нижний и верхний индексы. Элементы выравниваются соответственно. Удобно для написания коротких математических формул (прим. переводчика).

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

В отличии от выравнивания картинок контент в ячейках таблицы выровнен вертикально по центру:

Если вы хотите чтобы текст был расположен сверху или визу ячейки, то используйте значения top или bottom для вертикального выравнивания:

При вертикальном выравнивании в ячейках таблицы имеет смысл использовать только top, bottom или middle. Все остальные значения не дадут никакого визуального результата и будут иметь непредсказуемый результат в разных браузерах. Например, при использовании text-bottom в IE6 текст будет выровнен по нижнему краю ячейки, а в Safari4 — по верхнему. Sub выровняет текст по центру в IE6 и по верху в Safari4.

vertical-align и inline-block

Изображения, будучи строчными элементами, по факту ведут себя как inline-block. Вы можете задать им высоту и ширину и это сработает, в отличие от строчных собратьев.

Элементы inline-block ведут себя так же как изображения с вертикальным выравниванием, поэтому можете применять советы из пунктов выше. Тем не менее, следует помнить, что не все браузеры интерпретируют inline-block одинаково. Поэтому вертикальное выравнивание может быть меньшей из ваших проблем. Но это совсем другая история. Хотя…

Устаревший атрибут

Время от времени вы будете сталкиваться с атрибутом valign. Он применяется к ячейкам таблицы для вертикального выравнивания. Например<td valign=”top”>. Следует отметить, что этот способ является устаревшим и его не стоит применять. Действительно нет никаких оснований для его использования, поскольку все это вы можете сделать при помощи CSS.

Больше информации

• vertical-align в Almanac
• vertical-align на MDN
• Christopher Aue: All You Need To Know About Vertical-Align
• Trick with it для центрирования при неизвестной высоте родителя
• Разбираемся с vertical-align

Перевод статьи What is Vertical Align?