✔Вертикальное выравнивание строчных элементов. - «Верстка»

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

thumb {
vertical-align	: middle;

Обратите внимание, что в этом случае использования, свойство применяется к элементу thumb.
Поскольку изображения являются строчными элементами, то располагаются они в строке, как если бы они были простым текстом. Но что именно значит "располагаются в строке"? Вот именно здесь появляется
понятие "вертикальное выравнивание".

Атрибут может принимать следующие значения: baseline, sub, super, top, text-top,
middle, bottom, text-bottom, length, или значение в процентах..

Некоторые пытаются использовать это свойство для элементов блочного уровня и, естественно,
не получают ожидаемого результата. То есть если вы разместите один div внутри другого
и захотите вертикально центрировать его, то vertical-align вам не поможет. Как поступать в таком случае
я расскажу в отдельной статье.

Baseline

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

Middle

Возможно, наиболее используемое значение для vertical-align - это "middle" для
изображений-иконок. Результат получается довольно кросс-браузерным.

Браузер центрирует высоту текста в пикселях с высотой картинки, опять же, в пикселях:

Необходимо запомнить, если изображение больше чем текущий размер шрифта и высота строки, то оно будет "вытолкнуто"
вниз, если это необхоимо.

Text-bottom

Отличается от baseline тем, что изображение выравнивается по нижней линии текста (не базовая линия, а
по линии выступающих частей текста). Картинки могут быть выравнены по этой линии таким образом:

Text-top

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

Top и Bottom

Top и Bottom работаю подобно свойствам text-top и text-bottom, но при выравнивании расчёт происходит не по
высоте текущего текста, а по высоте максимального элемента в строке (например другой картинки). И при расопложении
учитывается именно его верх (или низ).

Sub и Super

Эти значения используются для верхних (superscript) и нижних (subscript) индексов. При использовании
этих значений, элементы выстраиваются таким образом:

Vertical Align on Table Cells

В отличии от картинок, у таблиц по умолчанию используется выравнивание по центру (middle).

Для вертикального выравнивания в ячейках таблицы, лучше всего использовать только эти
значения (top, middle, bottom). Использование других значений может
привести к непредсказуемым результатам в разных броузерах. Например, text-bottom прижимает
текст к низу в IE 6, а в Safari 4 - к верху. Установка значения sub выравнивает по центру в IE 6, а
в Safari 4, опять же, по верхней линии.

Vertical Align и элементы Inline-Block

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

Inline-block-элементы, при вертикальном выравнивании, ведут себя точно так же, как картинки.
Однако, стоит помнить, что не все броузеры обрабатывают inline-block-элементы одинаково, и поэтому
vertical-align может не оправдать ваших ожиданий. Хотя это уже другая история...

Атрибут "valign"

Иногда вы можете встретить атрибут "valign" для вертикального выравнивания в ячейках таблицы (например,
. Стоит отметить, что этот атрибут является устаревшим и не должен использоваться.
Да и зачем, если вы можете добиться желаемого, используя CSS.