Вертикальное выравнивание без таблиц
Кросс-браузерный метод (не работающий пока в IE8 beta 1), позволяющий вертикально отцентрировать в контейнере объект неизвестной высоты. Без использования таблиц.
Идея: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Постановка задачи:
- имеется область (например,
<div>), высота которой известна; - имеется некий объект внутри этой области, высота данного объекта неизвестна;
- требуется вертикально отцентрировать объект;
- таблицы использовать нельзя.
Применение: например, в макетах со 100% высотой, когда содержимое должно быть вертикально отцентрировано относительно контейнера.
Исходная разметка:
<div id="inner">
Lorem ipsum dolor sit amet и дальше по тексту
</div>
</div>
Решение для "нормальных" браузеров, поддерживающих CSS 2.1, очевидно: даже если у нас нет таблицы, её можно проэмулировать. Для этого умные люди и изобрели различные значения для свойства display. Нас сейчас будут интересовать только table и table-cell.
Итак, для "нормальных" браузеров задача решается красиво и элегантно:
display: table;
vertical-align: middle;
}
#inner {
display: table-cell;
vertical-align: middle;
}
Тестовая страница живёт здесь.
Как обычно :-), все простые и красивые вещи не работают в IE. Кто бы удивлялся…
The keystone of the solution in Internet Explorer: the internal object is absolutely positioned in half of the area height. Then is moved up by half of its height. The wrong interpretation of the height property in Internet Explorer is used (counted height is taken as a base of percentage height of nested tags). One extra nested tag <div> is needed for Explorer.
Если по-русски: внутренний объект позиционируется в середине области, а затем сдвигается на половину своей высоты. Работает это всё благодаоя тому, что IE неправильно интерпретирует свойство height — вычисленная высота берётся для расчёта процентной высоты вложенных элементов. Для IE требуется еще один дополнительный <div>.
Получаем:
<div id="middle">
<div id="inner">
Lorem ipsum dolor sit amet...
</div>
</div>
</div>
display: table;
vertical-align: middle;
}
#inner, #middle {
display: table-cell;
vertical-align: middle;
}
* html #outer {
overflow: hidden;
position: relative;
}
* html #middle {
position: absolute;
top: 50%;
width: 100%;
}
* html #inner {
position: relative;
top: -50%;
}
Как пишет автор, в IE7 это не работает (он использовал другие хаки, но это не меняет дело), так как IE7 не поддерживает значения table и table-cell. Поэтому, чтобы заставить код работать в IE7, продублируем хаки для IE6, но изменим их видимость, чтобы их видел только IE7:
overflow: hidden;
position: relative;
}
*:first-child+html #middle {
position: absolute;
top: 50%;
width: 100%;
}
*:first-child+html #inner {
position: relative;
top: -50%;
}
Рабочая страница здесь, скриншоты здесь, визуальное объяснение тому, как это всё работает в IE ——здесь.
Update: ни одно из решений не работает в IE8. Вот тебе и исправил Micro$oft баги…
Update: хоть IE8 поддерживает значения
table-xxxдля свойства display, судя по всему, о поддержкеvertical-alignдляtable-xxxпридётся забыть до следующей беты.И что характерно: хак для IE7 (
*:first-child+html) всё еще срабатывает и для IE8.Для IE8 приходится использовать
*:first-child+/**/html.Интересно, ситуация изменится?
[...] так давно я боролся с вертикальным выравниванием в Internet Explorer, и вот топять оказалось, что с выходом IE8 Beta [...]
[...] мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то [...]