Как центрировать сайт с помощью CSS
Центрирование сайта является ключевым элементом многих CSS макетов.
Хотя есть много способов сделать это в различных ситуациях, следующий пример чисто CSS, избегает баловства с процентами, и совместим со всеми современными браузерами.
У меня вошло в привычку (и вам советую) вначале сбрасывать все значения по умолчанию margins и padding , которые выставляют браузеры. Браузеры имеют по умолчанию таблицы стилей, которые загружаются автоматически, в качестве основы для любых CSS. Firefox, например, имеет по умолчанию body margin 8px. Это простой способ сбросить какие-либо значения по умолчанию, которые могли вмешаться в CSS, который мы пытаемся написать. Более обширный “Reset” стиль здесь, но мы сбросим только основное, что бы сократить код до минимума.
*{
margin:0;
padding:0;
}
Для этого урока я буду использовать основной Div тег с идентификатором “wrapper” (<div id=”wrapper”>).
Вы можете установить ширину, какую вам необходимо (не забывайте о разрешении экранов), а я выбрал 960px, так как среднее значение для разрешения(1024?768).
Основная структура страницы ниже:
Мы сначала собираемся назначить стиль для #wrapper , который будет центром в браузере. Это делается с помощью параметра margin. Не забудьте указать ширину #wrapper, а то элемент не будет центрирован. Для тестирования вы можете присвоить цвет фона и высоту #wrapper, чтобы увидеть результаты.
#wrapper{
width:960px;
margin:0 auto;
}
Всё хорош, но если бы не Internet Explorer 6 который изобретает для нас проблемы. Когда всем другим браузерам говорят прыгать, Internet Explorer 6 повторно изобретает прыжок и затем с шумом падает :-).
В случае, Internet Explorer 6 нам понадобится уделить особое внимание центру главного div (#wrapper). Для того чтобы компенсировать недостатки IE6 мы поставим выравнивание текста по центру. Это гарантирует, что wrapper будет по центру страницы
body{
text-align:center; /*Для IE6*/
}
Так как wrapper унаследует выравнивание текста от тега 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;
}
Demo Скачать
Оригинал статьи
Связанные записи
-
Алексей
-
Deli
-
Focus
