Как центрировать веб-сайт с помощью CSS (2015.07.20)
Центрирование сайта для многих CSS-макетов является ключевым элементом. Несмотря на большое количество методов сделать это в самых разных ситуациях, следующим способ позволяет избежать неточностей с процентами и отличается совместимостью с практически всеми версиями современных браузеров. Центрирование сайта для многих CSS-макетов является ключевым элементом. Несмотря на большое количество методов сделать это в самых разных ситуациях, следующим способ позволяет избежать неточностей с процентами и отличается совместимостью с практически всеми версиями современных браузеров. Для начала рекомендуется сбросить все значения padding и margins, выставленные по умолчанию в браузерах. В браузерах также по умолчанию автоматически загружены таблицы стилей, которые являются основой для любых CSS. В Firefox, например, значение margin тега body равно восьми пикселям. Ниже представлен максимально простой метод сбросить любые значения, которые могли бы стать препятствием при написании нового CSS. "Reset" — более обширный, но в этой ситуации для сокращения кода до минимума необходимо обнулить только основное. - *{
- margin:0;
- padding:0;
- }
В данном случае используется основной div-тег с идентификатором "wrapper" ( ). Ширина может быть установлена самая разная, при этом необходимо учитывать ширину монитора, мы выбираем 960px для среднего разрешения 1024 x 768. Основная структура страницы представлена ниже. Сначала назначается стиль для #wrapper, именно он и будет центром в браузере, для этого используется параметр margin. Для центрирования элемента необходимо указать ширину #wrapper на этапе тестирования. Чтобы увидеть результат, #wrapper необходимо присвоить высоту и цвет фона. - #wrapper{
- width:960px;
- margin:0 auto;
- }
Всё было бы отлично, если бы не проблемы с Internet Explorer 6: эта версия браузера управляется сложнее по сравнению с аналогами и конкурентами. При центрировании в Internet Explorer 6 особое внимание следует уделить главному div (#wrapper). Для компенсации недостатков IE6 выравнивание текста выставляется по центру, что гарантирует правильное расположение wrapper на сайте. - body{
- text-align:center; /*Для IE6*/
- }
Стоит отметить, что в данной ситуации wrapper наследует css выравнивание по центру от тега body, а в нашей ситуации может потребоваться размещение текста по левому краю. Для этого стиль #wrapper обновляется и выравнивается по левому краю. - #wrapper{
- width:960px;
- margin:0 auto;
- text-align:left;
- }
Этот блок CSS может быть выставлен на любой сайт, может потребоваться изменение размеров. Полный CSS-код должен быть представлен в следующем виде: - *{
- margin:0;
- padding:0;
- }
- body{
- text-align:center; /*Для IE6*/
- }
- #wrapper{
- width:960px;
- margin:0 auto;
- text-align:left;
- }
Читайте также:
|