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

img { 
vertical-align: middle;
}

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

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

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

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

vertical-align и inline-block

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

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

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

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

--

--

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

3.6K Followers

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC