cssing :: Архив :: Еще один способ вертикального выравнивания в CSS

Еще один способ вертикального выравнивания в CSS

Много копий сломано на ниве вертикального выравнивания без таблиц. Однако недавно я узнал о еще одном более простом способе. Этот пост, перевод статьи уважаемого мною Gunlaug о вертикальном выравнивании без дополнительного HTML и с помощью правда другого зла.
Оригинальная статья: fully centered across browser-land…

Задача

Отцентрировать что-нибудь вертикально внутри какого-либо элемента(экрана например).

Возьмем такой вот HTML:

1. <div id="out">
2. <p id="centered" >…</p>
3. </div>

Будем выравнивать этот абзац текста(с переменной высотой конечно, она зависит от текста). Высота #out не имеет особого значения - но пускай будет к примеру 500px(заведомо больше высоты параграфа).

Для всех современных броузеров(не IE) это достигается двумя простыми строками:

1. #out{
2. height:500px;
3. display:table-cell;
4. vertical-align:middle;
5. }

Только и всего. Теперь нужно это повторить для ИЕ…

IE+expression=нормальный броузер

Для эмуляции будем использовать expression (маленькие кусочки джаваскрипта который можно внедрять в CSS и работают лишь в ИЕ).
Вот что сэмулирует нам вертикальное выравнивание в ИЕ для элемента #centered внутри другого элемента:

#centered {
margin-top: expression(((outer.offsetHeight/2)
-parseInt(offsetHeight)/2)  <0 ? "0" :
(outer.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px') ;
}

(видно как внутри ЦСС правил для #centered мы получаем его высоту по айдишнику centered.offsetHeight и высоту div#outer)
Или если мы выравниваем внутри body:

#centered{
margin-top: expression((
document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) <0 ? "0" :
(document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px') ;

Это правило определяет высоту родительского элемента(или body) и высоту центрируемого элемента - после чего добавляет нужный margin-top для вертикального центрирования элемента.

Был предложен также метод для классов:
margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px")
(parseInt убран для наглядности)

Как это работает

1. document.documentElement.offsetHeight/2
   определяет высоту body и делит ее на 2. Это дает нам отступ ровно в половину высоты экрана
2. -(parseInt(offsetHeight)/2))
   Определяет высоту самого центрируемого блока. Отнятое от высоты родителя дает нам конечный margin-top
3. <0 ? "0" :
   Если полученная разница отрицательная, то отступу присваивается значение 0.
4. <0 ? "0" :
   Если же полученный результат больше либо равен 0, то повторяем вычисления и берем margin-top равный полученному значению для вертикального центрирования

Словами

Что бы понять откуда взялись все эти вычисления. Представьте что наш блок отцентрирован по вертикали внутри другого блока. Вот так:

И теперь нам нужно посчитать расстояние от верха родительского блока - до отцентрированного элемента(x-y). Очевидно для этого нам придется отнять от половины высоты родителя(x), половину высоты отцентрированного(y). Вычисление этого расстояния и происходит в скрипте, после чего оно присваивается в качестве margin-top, что по сути визуально центрирует блок по вертикали.

Конечно это своеобразная дилемма - “3 обертывающих DIV” или “expression”, зависит от случая, но как по мне, выбор тут однозначен ;).

Если Вам нужна валидность, да и просто ради красоты, эту строку для IE стоит перенести в отдельный CSS файл(СС), либо каким то образом оградить от других броузеров.

Ссылки

• Оригинал fully centered across browser-land… статья Gunlaug Sørtun про этот прием и центрирование вообще (там же в правой колонке несколько примеров)
• Пример центрирования в блоке
• Пример центрирования на экране
• Пример Gunlaug, для ИЕ там выводятся промежуточные числа вычислений..
• Информация об определении размеров блока на MSDN
• Информация о методе parseInt
• Вариант для классов, а не айди

Метод в принципе не сложный, может кто то уже даже и использовал… буду рад услышать Ваше мнение или совет по поводу техники!

XHTML/CSS