Идея: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Постановка задачи:

  • имеется область (например, <div>), высота которой известна;
  • имеется некий объект внутри этой области, высота данного объекта неизвестна;
  • требуется вертикально отцентрировать объект;
  • таблицы использовать нельзя.

Применение: например, в макетах со 100% высотой, когда содержимое должно быть вертикально отцентрировано относительно контейнера.

Исходная разметка:

[-]
View Code HTML
<div id="outer" style="height: 1000px">
    <div id="inner">
        Lorem ipsum dolor sit amet и дальше по тексту
    </div>
</div>

Решение для "нормальных" браузеров, поддерживающих CSS 2.1, очевидно: даже если у нас нет таблицы, её можно проэмулировать. Для этого умные люди и изобрели различные значения для свойства display. Нас сейчас будут интересовать только table и table-cell.

Итак, для "нормальных" браузеров задача решается красиво и элегантно:

[-]
View Code CSS
#outer {
    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>.

Получаем:

[-]
View Code HTML
<div id="outer" style="height: 1000px">
    <div id="middle">
        <div id="inner">
            Lorem ipsum dolor sit amet...
        </div>
    </div>
</div>
[-]
View Code CSS
#outer {
    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:

[-]
View Code CSS
*:first-child+html #outer {
    overflow: hidden;
    position: relative;
}

*:first-child+html #middle {
    position: absolute;
    top: 50%;
    width: 100%;
}

*:first-child+html #inner {
    position: relative;
    top: -50%;
}

Рабочая страница здесь, скриншоты здесь, визуальное объяснение тому, как это всё работает в IE ——здесь.

Добавить в закладки
  • del.ici.ous
  • Digg
  • Furl
  • Google
  • Simpy
  • Spurl
  • Y! MyWeb
  • БобрДобр
  • Мистер Вонг
  • Yandex.Закладки
  • Текст 2.0
  • News2
  • AddScoop
  • RuSpace
  • RUmarkz
  • Memori
  • Google Bookmarks
  • Писали
  • СМИ 2
  • Моё Место
  • 100 Закладок
  • Ваау!
  • Technorati
  • RuCity
  • LinkStore
  • NewsLand
  • Lopas
  • Закладки - IN.UA
  • Connotea
  • Bibsonomy
  • Trucking Bookmarks
  • Communizm
  • UCA
  • Slashdot
  • Magnolia
  • Blogmarks
  • Current
  • Meneame
  • Oknotizie
  • Diigo
  • Funp
  • Hugg
  • Dealspl.us
  • N4G
  • Mister Wong
  • Faves
  • Yigg
  • Fresqui
  • Care2
  • Kirtsy
  • Sphinn
  • SaveThis.ru

Связанные записи

13
Март
2008

Комментарии к статье «Вертикальное выравнивание без таблиц» (4)  »

  1. Vladimir says:

    Update: ни одно из решений не работает в IE8. Вот тебе и исправил Micro$oft баги…

  2. Vladimir says:

    Update: хоть IE8 поддерживает значения table-xxx для свойства display, судя по всему, о поддержке vertical-align для table-xxx придётся забыть до следующей беты.

    И что характерно: хак для IE7 (*:first-child+html) всё еще срабатывает и для IE8.
    Для IE8 приходится использовать *:first-child+/**/html.

    Интересно, ситуация изменится?

  3. [...] так давно я боролся с вертикальным выравниванием в Internet Explorer, и вот топять оказалось, что с выходом IE8 Beta [...]

  4. [...] мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то [...]

Подписаться на RSS-ленту комментариев к статье «Вертикальное выравнивание без таблиц» Trackback URL: http://blog.sjinks.org.ua/css/24-vertical-align-without-tables/trackback/

Оставить комментарий к записи «Вертикальное выравнивание без таблиц»

Вы можете использовать данные тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Оставляя комментарий, Вы выражаете своё согласие с Правилами комментирования.

Подписаться, не комментируя