Как выровнять сайт по центру в IE, Opera, Mozilla, Chrome?

Метки: выравнивание по центру, кроссбраузерная верстка, центирорование сайта

Уже довольно-таки давно создаю сайты, но только сейчас заметил, что один из приемов для выравнивания по центру сайта с нерезиновой версткой не работает!
Вобщем на днях делал верстку одного интернет-магазина.
Он, как ни странно, был не резиновой, а статичной верстки. И, что еще интереснее, но не совсем по теме, 1100px в ширину (а я то по старинке делаю 1000 с запасом под скролл).
Итак, обычно, для того, чтобы выровнять сайт по центру целиком, я использовал свойство CSS для самого основного блока, например:

<body>
    <div id="main">
        Тут содержимое
    </div>
</body>



и стиль для выравнивания по центру:

#main{
    width:1100px;
    margin:0 auto;
}



В данном случае прием сработает, но не для всех, да и вообще лучше подстраховаться и сделать стопроцентно кроссбраузерный сайт.

Кроссбраузерное выравнивание сайта по центру

Добавляем следующие свойства:

body{
    text-align:center; /*Теперь вообще все, что есть на сайте будет по центру*/
}
#main{
    text-align:left;/*Этот блок будет по центру, а содержимое по умолчанию*/
    margin:0 auto;/*Не забываем про стандартный прием*/
}



Что же мы сделали? Мы центрировали сайт целиком. Если разобраться, станет понятно, что сначала мы выравниваем по центру все, что есть на сайте (внутри тега body), а затем прописываем свойство для самого первого блока, и он сам остается по середине, а его содержимое выравнивается по левому краю (как и было изначально).

Удачи в верстке!


 


Комментарии

Комментарии временно отключены. Сайт и информация на нем находятся в спящем режиме.


© 2006 - 2018, Александр Сергеев