Свойство CSS vertical-align
Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.
Синтаксис CSS vertical-align
Где value может принимать следующие значения:
Значение vertical-align по умолчанию:
Вертикальное выравнивание в таблицах
Синтаксис CSS valign для таблиц
Где value может принимать следующие значения:
Преобразуется на странице в следующее:
| Выравнивание по верху |
| Выравнивание по середине |
| Выравнивание по низу |
Примеры с вертикальными выравниваниями
Пример 1. Значения vertical-align: baseline, bottom, top, sub
Пример 2. Значения vertical-align: абсолютные значения и проценты
Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.
Преобразуется на странице в следующее:
Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз
Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы «X» (также называемой x-высотой).
Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:
Html Table Row. VAlign Свойство
Определение
Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
Получает или задает выравнивание по вертикали содержимого ячеек строки в элементе управления HtmlTable.
Значение свойства
Выравнивание по вертикали содержимого ячеек строки в элементе управления HtmlTable. Значение по умолчанию равно Empty и показывает, что значение свойства не задано.
Примеры
В следующем примере кода показано, как использовать VAlign свойство для управления вертикальным выравниванием содержимого ячеек в целой строке.
Комментарии
Используйте VAlign свойство, чтобы указать вертикальное выравнивание содержимого в ячейках строки в HtmlTable элементе управления.
Установка этого свойства влияет на все ячейки в строке таблицы, представленной экземпляром HtmlTableRow класса. Чтобы применить атрибут выравнивания к одной ячейке строки, установите VAlign свойство для этой ячейки.
В следующей таблице перечислены значения, которые можно использовать для этого свойства.
| Значение | Описание: |
|---|---|
| Top | Выровняйте содержимое ячейки по верхнему крае ячейки. |
| Middle | Выравнивает содержимое ячейки в центре ячейки. |
| Bottom | Выровняйте содержимое ячейки по нижнему крае ячейки. |
Можно также использовать BaseLine в качестве значения этого свойства. Однако не все браузеры поддерживают эту функцию.
vertical-align
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | baseline |
|---|---|
| Наследуется | Нет |
| Применяется | К встроенным элементам или ячейкам таблицы. |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align |
Версии CSS
Описание
Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.
Синтаксис
vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты
Значения
Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по ее верхнему краю.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства vertical-align
Объектная модель
[window.]document.getElementById(» elementID «).style.verticalAlign
Браузеры
Обзор CSS-свойства vertical-align
Довольно часто от веб-разработчиков можно услышать возмущенный возглас: “vertical-align не работает!”. Несмотря на то, что назначение этого свойства следует из его названия, на практике, начинающие разработчики, равно как и многие ветераны CSS, часто испытывают трудности с его применением.
В сегодняшней статье, я постараюсь раскрыть все непонятные моменты этого CSS-свойства.
Чего не делает vertical-align
Наиболее распространенное заблуждение относительно свойства vertical-align состоит в том, что оно влияет на вертикальное выравнивание всех дочерних элементов контейнера, к которому применяется. Например, если мы применим к контейнеру свойство vertical-align: top, предполагается, что все содержимое контейнера будет выровнено по верхнему краю контейнера.
Это напоминает мне старые, добрые времена табличной верстки:
В этом примере табличной ячейки, свойство valign (сейчас уже запрещенное в HTML5), действительно прижмет все содержимое ячейки к верхнему краю. Возможно исходя из этого, CSS-разработчики ожидают похожего эффекта, от применения свойства vertical-align.
Но свойство vertical-align так не работает.
Как на самом деле работает vertical-align
Свойство vertical-align можно разделить на три простых правила:
Другими словами, следующий код не будет иметь никакого эффекта:
Правильное использование свойства vertical-align, поможет выровнять строчный элемент относительно других строчных элементов на странице. Насколько высоко или низко расположится элемент по вертикали, будет зависеть от размера соседних строчных элементов, или от свойства line-height, заданного для этой строки.
На картинке ниже, представлен пример того, как ведут себя строчные элементы, когда вы применяете свойство vertical-align:
Значения свойства – ключевые слова
Свойство vertical-align может принимать следующие значения:
Большинство из них вам скорее всего не понадобятся, но всегда хорошо знать из чего можно выбрать. Например, на демо-странице, текстовому полю назначено свойство vertical-align: top, благодаря чему, оно выровнено относительно самого высокого элемента в строке (большой картинки).
А если вы не хотите располагать элемент относительно изображений или других строчных элементов, можно использовать значения text-top или text-bottom, чтобы ваш элемент позиционировался относительно текста, расположенного в строке.
О значении “middle”
К сожалению, vertical-align: middle; не расположит строчный элемент по центру самого большого элемента в строке, как этого можно было бы ожидать. Вместо этого, значение middle расположит элемент относительно гипотетической строчной “x” (также называемой “x-высотой”). По-хорошему, это значение следовало бы назвать “text-middle”, для правильной идентификации его механизма.
На этой демо-странице, размер текста специально увеличен, чтобы вы могли посмотреть, как именно выравниваются элементы, при значении middle. По всему выходит, что это значение, вам будет нужно гораздо реже, чем остальные.
Цифровые значения свойства
Возможно вы не знали, но vertical-align в качестве значения может принимать абсолютные и процентные значения, все приведенные ниже примеры будут правильными:
В чем разница между абсолютными значениями и ключевыми словами, можно почитать в CSS-спецификации, или (что на мой взгляд гораздо полезнее) самостоятельно попробовать различные варианты.
Перевод статьи “Understanding CSS’s vertical-align Property”, автор Louis Lazaris
8 комментариев
можно блоку задать свойство display: table-cell
тогда содержимое блока будет выравниваться по правилам vertical-align(middle, top etc)
вот пример от w3c еще от 2001 года http://www.w3.org/Style/Examples/007/center.htm
свойство display: table-cell не поддерживается IE 6 7 и 8 версиями
Спасибо большое за открытую и подробную информацию! Отличный пост!
Полезны уроки, но возник момент — ваш сайт тормозит на i3+3gbRAM ноутбуке. Скроллинг просто выводит из себя. Всё прыгает.
Спс за статьи.
Очень полезная и доступна выложенная информация. Хорошо что Великий Гугл дал мне почитать данную статью. Благодарность автору.
Спасибо большое, очень помогло
Хорошая статья, реально понятно и доступно описано. Мне понравилась и помогла. По больше бы, таких нормальных авторов.
Разбираемся с vertical-align
«Опять vertical-align не работает!» — вздохнёт веб-разработчик.
CSS-свойство vertical-align — одно из тех, которые с виду очень просты, но могут вызвать вопросы у начинающих разработчиков. Я думаю, что даже у многих ветеранов CSS когда-то были проблемы с тем, чтобы его до конца понять.
В этой статье я постараюсь в понятной форме рассказать про это свойство.
Чего оно не делает Скопировать ссылку
Вспоминаются времена, когда мы делали раскладки на основе таблиц:
Но vertical-align работает не так.
Чем оно является на самом деле Скопировать ссылку
Использование свойства vertical-align может быть разбито на три простых для понимания правила:
Иными словами, следующий код не даст никакого эффекта:
С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов.
Несколько картинок Скопировать ссылку
Вот картинка с пояснительным текстом, которая поможет вам понять, что происходит при вертикальном выравнивании строчных элементов:
А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.
Ключевые слова Скопировать ссылку
Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align :
О ключевом слове middle Скопировать ссылку
Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.
Числовые значения Скопировать ссылку
Возможно, вы не знали о том, что vertical-align принимает числовые и процентные значения. Однако это так, и вот примеры их использования:
Несмотря на то, что вы можете прочитать в спецификации раздел, описывающий, какие есть ключевые слова и значения, я думаю, гораздо полезней будет самостоятельно поиграть с ними и сравнить результаты.
Заключение Скопировать ссылку
Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:
Свойство vertical-align работает только со строчными элементами или строчными блоками и ячейками таблицы. В случае применения не к ячейкам таблицы, оно действует на сам элемент, а не на его содержимое.