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

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

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

Существуют более обширные таблицы «сброса» , но в нашем варианте  мы сбросим основные параметры, и сократим код к минимуму.

*{
margin:0;
padding:0;
}

Для этого урока я буду использовать основной тэг div с идентификатором «wrapper». Вы можете установить любую ширину с любым значением под Ваши потребности сайта (помните разрешающие способности!). Я выбрал ширину 960px в пользу большинства пользователей.

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

 

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

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

С Internet Explorer могут возникнуть некоторые проблемы. Для решения проблемы необходимо применить стиль выравнивания по центру.

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

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

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

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

*{
margin:0;
padding:0;
}

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

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

Источник: http://buildinternet.com.
Перевод: Администратор сайта explorer-soft.com.