Как выровнять сайт по центру в 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), а затем прописываем свойство для самого первого блока, и он сам остается по середине, а его содержимое выравнивается по левому краю (как и было изначально).
Удачи в верстке!