Как центрировать веб-сайт с помощью CSS (2015.07.20)

Центрирование сайта для многих CSS-макетов является ключевым элементом. Несмотря на большое количество методов сделать это в самых разных ситуациях, следующим способ позволяет избежать неточностей с процентами и отличается совместимостью с практически всеми версиями современных браузеров.

Центрирование сайта для многих CSS-макетов является ключевым элементом. Несмотря на большое количество методов сделать это в самых разных ситуациях, следующим способ позволяет избежать неточностей с процентами и отличается совместимостью с практически всеми версиями современных браузеров.

Для начала рекомендуется сбросить все значения padding и margins, выставленные по умолчанию в браузерах. В браузерах также по умолчанию автоматически загружены таблицы стилей, которые являются основой для любых CSS. В Firefox, например, значение margin тега body равно восьми пикселям. Ниже представлен максимально простой метод сбросить любые значения, которые могли бы стать препятствием при написании нового CSS. "Reset" — более обширный, но в этой ситуации для сокращения кода до минимума необходимо обнулить только основное.

1. *{
2. margin:0;
3. padding:0;
4. }

В данном случае используется основной div-тег с идентификатором "wrapper" (

Основная структура страницы представлена ниже.

Сначала назначается стиль для #wrapper, именно он и будет центром в браузере, для этого используется параметр margin. Для центрирования элемента необходимо указать ширину #wrapper на этапе тестирования. Чтобы увидеть результат, #wrapper необходимо присвоить высоту и цвет фона.

1. #wrapper{
2. width:960px;
3. margin:0 auto;
4. }

Всё было бы отлично, если бы не проблемы с Internet Explorer 6: эта версия браузера управляется сложнее по сравнению с аналогами и конкурентами.

При центрировании в Internet Explorer 6 особое внимание следует уделить главному div (#wrapper). Для компенсации недостатков IE6 выравнивание текста выставляется по центру, что гарантирует правильное расположение wrapper на сайте.

1. body{
2. text-align:center; /*Для IE6*/
3. }

Стоит отметить, что в данной ситуации wrapper наследует css выравнивание по центру от тега body, а в нашей ситуации может потребоваться размещение текста по левому краю. Для этого стиль #wrapper обновляется и выравнивается по левому краю.

1. #wrapper{
2. width:960px;
3. margin:0 auto;
4. text-align:left;
5. }

Этот блок CSS может быть выставлен на любой сайт, может потребоваться изменение размеров.

Полный CSS-код должен быть представлен в следующем виде:

1. *{
2. margin:0;
3. padding:0;
4. }
5. body{
6. text-align:center; /*Для IE6*/
7. }
8. #wrapper{
9. width:960px;
10. margin:0 auto;
11. text-align:left;
12. }

Читайте также:

• Товарный знак – что это такое и зачем он нужен?
• Как увеличить эффективность контекстной рекламы
• SMM и SMO на сайте Вконтакте