vertical-align

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

Краткая информация

Значение по умолчанию	baseline
Наследуется	Нет
Применяется	К строчным элементам или ячейкам таблицы
Анимируется	Да

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top| |

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

Значение	Описание	Вид
baseline	Выравнивает базовую линию блока по базовой линии родителя. Если у блока нет базовой линии, то за неё принимается нижняя граница.	Заголовок Текст
bottom	Выравнивает низ блока по нижней части строки.	Заголовок Текст
middle	Выравнивает вертикальную среднюю точку блока по базовой линии родительского блока плюс половина высоты буквы «x».	Заголовок Текст
sub	Опускает базовую линию блока вниз для создания нижнего индекса. Не оказывает влияние на размер текста.	Заголовок Текст
super	Поднимает базовую линию блока вверх для создания верхнего индекса. Не оказывает влияние на размер текста.	Заголовок Текст
text-bottom	Нижняя граница элемента выравнивается по нижнему краю содержимого родителя.	Заголовок Текст
text-top	Верхняя граница элемента выравнивается по верхнему краю содержимого родителя.	Заголовок Текст
top	Выравнивает верх блока по верхней части строки.	Заголовок Текст

В качестве значения также можно использовать проценты, пиксели или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчёт ведётся от значения свойства line-height, при этом 0% аналогично значению baseline .

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

baseline Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента. bottom Выравнивает по нижнему краю ячейки. middle Выравнивает по середине ячейки. top Выравнивает содержимое ячейки по её верхнему краю.

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства vertical-align

Объектная модель

Объект.style.verticalAlign

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Источник

Грамотное адаптивное выравнивание шапки сайта

Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач — это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню — справа. Можно использовать float и position:absolute, а для выравнивания по вертикали — добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.

Ниже описан лаконичный способ решения этой проблемы.

HTML-разметка максимально проста:

 Super Bad
 First LinkSecond LinkThird Link

Высота шапки фиксированная, добавляем text-align: justify, для дочерних элементов:

Добавляем display: inline-block для всех элементов nav, чтобы можно было расположить их друг за другом:

Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block, автор Jelmer de Maat:

В итоге получилось выравнивание по горизонтали, без использования float и position:absolute. Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока — шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.

Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown, упомянутый Michał Czernow:

header h1 < height: 100%; >header h1::before

В результате получается то, что нужно:

Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать:

Используем трюк с псевдоэлементом на header:

header < text-align: justify; height: 15em; padding: 2em 5%; background: #2c3e50; color: #fff; >header::after < content: ''; display: inline-block; width: 100%; >header > div, header nav, header div h1 < display: inline-block; vertical-align: middle; >header > div < width: 50%; height: 100%; text-align: left; >header > div::before

Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.

header < text-align: justify; padding: 2em 5%; background: #2c3e50; color: #fff; >header::after < content: ''; display: inline-block; width: 100%; >header h1, header nav < display: inline-block; vertical-align: middle; >header h1 < width: 50%; text-align: left; padding-top: 0.5em; >header nav

Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:

@media screen and (max-width: 820px) < header < height: auto; >header > div, header > div h1, header nav < height: auto; width: auto; display: block; text-align: center; >>

Результат адаптивен и на мобильных устройствах выглядит так:

В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * < padding: 0; margin: 0; >body < background: #1abc9c; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px;>header < text-align: justify; height: 8em; padding: 2em 5%; background: #2c3e50; color: #fff; >header::after < content: ''; display: inline-block; width: 100%; >header > div, header > div::before, header nav, header > div h1 < display: inline-block; vertical-align: middle; text-align: left; >header > div < height: 100%; >header > div::before < content: ''; height: 100%; >header > div h1 < font-size: 3em; font-style: italic; >header nav a < padding: 0 0.6em; white-space: nowrap; >header nav a:last-child < padding-right: 0; >@media screen and (max-width: 720px) < header < height: auto; >header > div, header > div h1, header nav < height: auto; width: auto; display: block; text-align: center; >>

Источник

vertical-align

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

Синтаксис

Значения

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

В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height , при этом 0% аналогично значению baseline .

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

HTML5 CSS2.1 IE Cr Op Sa Fx

       TEX и LATEX

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства vertical-align

Объектная модель

[window.]document.getElementById(» elementID «).style.verticalAlign

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Источник