Как расположить блок посередине?

Простой вопрос, но который регулярно задают: как выровнять блочный элемент (div или table, в зависимости от того, что вы используете в качестве контейнера) посередине экрана?
Ответ как всегда прост донельзя:

Если вы работаете в режиме поддержки стандартов и не рассматриваете браузеры, старше ИЕ6, то достаточно написать блоку свойство margin: 0 auto.
Если же вы верстаете в quirks mode или в требованиях в верстке есть поддержке ИЕ 5, то вам придется для родительского, относительно вашего искомого контейнера добавить свойство text-align: center

Кагбэ демо

DEMO-box

Финальный стиль


.context-wrap {
    border:1px solid #000;
    padding:1em;
    text-align:center;/*для ИЕ в quirks mode
                               и для ИЕ младше ИЕ6*/
}
.context-box {
    border:1px solid red;
    margin:0 auto;/* для нормальных браузеров
                            и для ИЕ в strict mode*/
    padding:1em;
    text-align:left;
    width:50%;
}

P.S. Раньше, когда CSS мало кто знал и использовал вопрос решался прописыванием элементу HTML-атрибута align="center"

Метки: азы css

Запись создана: Понедельник, 23 Март 2009 в 23:18 и находится в рубриках CSS, верстка. Вы можете следить за комментариями к этой записи через ленту RSS 2.0. Вы можете оставить отзыв, или trackback с вашего собственного сайта.

CSS Guru