Что такое vertical-align и с чем его едят?
January 31st, 2007 by Yuriy DrozdovНедавно пришел к выводу, что я совершенно не могу пользоваться свойством vertical-align. Хотя, казалось бы - задал свойство height и выравнивай себе на здоровье свойством vertical-align. Но не все так просто. Обратимся за информацией к стандарту CSS 2. Область применения у vertical-align : строковые и ‘table-cell’ элементы. По умолчанию начальное значения этого свойства - baseline(Осуществляется выравнивание базисной линий блока относительно базисной линии его родительского блока. Если у блока нет базисной линии, то выполняется выравнивание его нижней границы относительно базисной линии родительского блока). Интересна последовательностей действий при формировании выравнивания ячеек в таблице, согласно спецификации CSS 2:
- Сначала позиционируются ячейки, выровненные относительно базовой линии. В результате будет создана базовая линия строки. Далее позиционируются ячейки со свойством ‘vertical-align: top’.
- После этого у строки имеется верх, базовая линия (возможно) и условная высота, которая является расстоянием от верхнего края до самого нижнего края ячеек, позиционированных на этот момент.
- Если высота какой либо из оставшихся ячеек, которые выровнены по нижнему краю или по центру, превышает текущую высоту строки, высота строки увеличится до максимальной высоты таких ячеек за счет опускания нижней части.
- В последнюю очередь позиционируются оставшиеся ячейки.
Для ячейки таблицы, кажется, все понятно с выравниванием. А как быть со структурными блоками? Рассмотрим пример:
<div style="height:100px;border: solid 1px red;width:100px;vertical-align:middle;"">test</div>Получаем слудующее:
Элемент div порождает структурный блок, который содержит в себе безымянный строковый блок. Возникает вопрос,как выровнять по середине высоты родительского блока безымянный строковый блок? В этом нам поможет свойство line-height. Если это свойство применяется к элементу уровня блока, содержимое которого состоит из элементов строкового уровня, то оно определяет минимальное значение высоты каждого порождаемого им строкового блока.
<div style="height:100px;border: solid 1px red;width:100px;line-height: 100px;vertical-align:middle;"">test</div>При задании свойства line-height - vertical-align работает так, как нам нужно:
а что тебя собственно удивило?
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
цитата:
“This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.”
див не инлайновый элемент, по этому vertical-align на него не действует. line-height - используется для задания минимальной высоты строки инлайновых элементов которые размещены внутри блока, т.е. ты величил высоту строки и отцентровал текст внтури строки по центру. но, при переносе текста будет отстой, т.к. будет новая строка.
Я написал, что line-height для строковых и table-cell элементов используется. Действительно, этот метод хорош лишь если контейнер имеет достаточную ширину и вся строка поместится в один линейный блок. Позже напишу как сделать выравнивание для случая когда строка разбивается на несколько линейных блоков.
А удивило меня… Даже не удивило, а позабавило, вертикальное выравнивание в IE, как раз для случая с несколькими линейными блоками.
[...] Как и обещал, продолжаю. Если брать метод, описанный в Что такое vertical-align и с чем его едят?, то он хорош только в том случае, если контейнер (в нашем случае был div) имеет достаточную ширину и вся строка поместится в один линейный блок. Если строка не влазит в ширину контейнера, она разбивается на несколько линейных блоков. И каждый линейный блок наследует line-height. Получаем в этом случае, мягко говоря, не совсем то, что ожидали. [...]
[...] Про вертикальное выравнивание я уже писал, можно почитать тут и тут. Написать снова меня натолкнула статья Артема Курапова - Element alignment. [...]
Скажите пожалуйста как выровнять табличку по центру?
Спасибо за рание!
по центру страницы? вертикально или горизонтально?
А как выровнять текст по нижнему краю DIV? И чтобы это одинаково смотрелось и в ИЕ и в Опере и в ФФ.
line-height помогает выровнять текст в Опере и ФФ, но в ИЕ7 не работает.