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

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

Для начала необходимо будет сбросить установленные по умолчанию браузерами расстояния. У каждого браузера есть встроенные таблицы стилей, которые загружаются автоматически и являются основой для любых других таблиц стилей. У Firefox, например, по умолчанию значение margin для тега body равняется 8-ми пикселям. Ниже представлен самый простой способ обнулить все необходимые для нашего примера значения.

Хочу заметить, что существуют более продвинутые варианты сброса, но для нашего урока будет достаточно и этого.

 *{     margin:0; 
padding:0;
}

Я буду использовать для нашего урока слой с идентификатором “wrapper”. Вы можете задать любую ширину (но помните о расширении мониторов Ваших посетителей). Я решил сделать ширину 960 пикселей, что подходит для разрешений выше средних (1024х768). Снизу Вы можете увидеть структуру страницы:

Для начала мы назначим слою #wrapper стиль, который будет центрировать его в браузере. Это сделано используя параметр margin. Не забудьте указать ширину слоя #wrapper или же элемент не будет центрирован. Трудно центрировать то, что занимает 100% ширины. Для удобства тестирования Вам необходимо также назначить другой цвет фона и высоту к слою #wrapper. Это поможет Вам увидеть результат.

#wrapper{
width:960px;
margin:0 auto;
}

С Internet Explorer не все так просто. Для правильного результата нам необходимо добавить еще следующий стиль (необходимо выровнять текст по центру, для того чтобы слой выровнялся по центру в Internet Explorer):

body{
text-align:center; /*For IE6 Shenanigans*/
}

Тег body включает в себя wrapper, и поэтому выравнивание текста передается и на него. Обычно необходимо, чтоб текст был слева, поэтому нам необходимо добавить это условие в стиль #wrapper:

#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}

Все - мы закончили! Этот маленький блок CSS поможет Вам центрировать любой сайт, только подстройте ширину под себя. Весь код выглядит так:

 *{ 
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}

#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.buildinternet.com
Перевел: Максим Шкурупий
Урок создан: 24 Марта 2009
Просмотров: 84490
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^