CSS свойство vertical-align.

Опубликовано: 18 февраля 2014      Автор:

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

Свойство vertical-align предназначено для позиционирования элементов в вертикальной плоскости относительно элемента-контейнера, который может быть ячейкой таблицы, а также по отношению к тексту, окружающему форматируемый элемент.

Наиболее распространенное ошибочное мнение, касающееся этого свойства, заключается в том, что если оно применяется к определенному элементу страницы, то все дочерние элементы форматируемого объекта, находящиеся внутри него, должны быть вертикально позиционированы в соответствии с заданным значением. На самом деле это не так. Во первых, CSS свойство vertical-align применимо только к элементам строчного типа, таких как inline и inline-block, а так же к ячейкам таблиц. Во вторых, если данное свойство используется для ячейки таблицы, то оно влияет на ее содержимое, а если форматируется строчный элемент или строчный блок, то vertical-align влияет на позиционирование самого элемента и никаким образом не влияет на его содержимое. Необходимо знать эти простые правила использования данного свойства, большего от него вы не добьетесь.

Прежде всего, давайте рассмотрим допустимые значения:

  • baseline — Базовая линия форматируемого элемента устанавливается по базовой линии элемента предка. В том случае, если у родителя нет базовой линии, то выравнивание производится по его нижней границе.
  • top -Верхний край элемента ровняется по верхнему краю самого высокого, присутствующего в текущей строке элемента.
  • middle — В этом случае средняя точка позиционируемого элемента выравнивается на уровне, который получается в результате сложения уровня базовой линии родительского элемента и половины значения его высоты.
  • bottom — Нижний край форматируемого элемента ровняется по основанию элемента строки, который расположен ниже всех других.
  • sub — Смещаемый элемент устанавливается в виде подстрочного, как нижний индекс. На размер шрифта такое форматирование не влияет.
  • super — Элемент позиционируется в виде надстрочного, как верхний индекс, при этом размер шрифта не изменяется.
  • text-top — Верхний край форматируемого элемента выравнивается по самой верхней точке строки.
  • text-bottom — Нижний край элемента устанавливается по уровню самой нижней точки текущей строки.
  • inherit — Наследование значения от родительского элемента.

Помимо указанных выше ключевых слов, в качестве значений для CSS свойства vertical-align можно применять числовые значения с указанием нужных единиц измерения (px, em и другие), а также относительные процентные значения. Если указано положительное число, то форматируемый элемент поднимается на заданное расстояние вверх от базовой линии строки. А в случае указания отрицательного значения – элемент смещается вниз. Если используются процентные значения, то расчет величины смещения производится относительно заданного значения свойства line-height. Следует иметь в виду, что 0% значение эквивалентно ключевому слову baseline.

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

  • top — Содержимое ячейки выравнивается по ее верхней границе
  • middle — По центру ячейки
  • bottom -По нижней грани ячейки
  • baseline — Базовая линия ячейки устанавливается на уровне базовой линии текстовой строки либо вложенного в ячейку элемента

Помимо всего указанного выше, необходимо особенно отметить один нюанс использования CSS свойства vertical-align применительно к строчным элементам, который касается его значения — middle. Вопреки ожиданию большинства веб-разработчиков, установка такого значения не позволит поместить строчный элемент на уровне середины самого высокого элемента, находящегося в текущей строке. В результате такого форматирования, элемент выравнивается относительно середины предполагаемой буквы «x» строчного размера. Поэтому само название ключевого слова middle несколько обманчиво и результат его применения может дать нежелательный эффект. В некоторых случаях может помочь использование дополнительных свойств стилевого форматирования, таких как display, font-size, line-height и т.д.

Что касается кроссбраузерности, то CSS свойство vertical-align поддерживается всеми популярными браузерами. Единственной возможной причиной возникновения проблем может стать тот факт, что все версии IE включая восьмую, не обеспечивают поддержку значения inherit.