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

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

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

Кагбэ демо

DEMO-box

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


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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.