|
В 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
и bottom для vertical-alignment:
Для вертикального выравнивания в ячейках таблицы, лучше всего использовать только эти
значения (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.
Перейти обратно к новости
|