ГлавнаяВебмастеруCSSЦентрирование страницы в блочной вёрстке

Центрирование страницы в блочной вёрстке

13.04.2009

Здравствуйте, уважаемые читатели моего блока Курилка.co.ua. В этой заметка мы говорим о центрировании фиксированного содержимого страниц в блочной вёрстке html-страниц.

Как по мне, блочная вёрстка — гибкая, экономичная, структурированная и т.д. В тоже время, табличная вёрстка допускает больше вольностей и менее зависимо от CSS. Отсюда и проистекает гибрид этих двух подходов.

Так проблема понимания браузерами CSS свойств: margin и padding — требуют дополнительных трюков и хаков. Не вдаваясь в философию, советую остановиться на фиксированной вёрстке, с чётко определенными размерами, без использования процентов и т.п. Отсюда проистекает вопрос позиционирования страниц, а точнее их содержимого. На мой взгляд, наиболее оптимальным здесь является — центрирование. Как центрировать страницу? Давайте рассмотрим следующим пример.

<html>
<head>
<style>
body { text-align:center; }
#out {
margin:auto;
width:770px;
text-align:left;
}
</style>
</head>
<body>
<div id="out">Content #out DIV</div>
</body>
</html>

Решение задачи построено на двух элементах (блоках): BODY и DIV с атрибутом id, значением которого название является идентификатора данного блока.

В приведённом примере, BODY выступает, так называемым, селектором — html-тег для которого определяются правила форматирования. В нашем случае, это CSS свойство text-align определяющее горизонтальное выравнивание текста в пределах элемента.

Теперь нам осталось позиционировать сам DIV с его содержимым, задав фикчированный размер. Обратите внимание на то, что в CSS, перед названием идентификатора стоит знак решетки (#). Первое CSS-свойство которое мы видим это margin — внешний отступ от блока, в нашем случае это auto (автоматически). Дальше идет width (ширина блока) и уже известный нам text-align, который позволит нам нивелировать тоже свойство внешнего блока (BODY)

Как вы видите, всё достаточно просто. Более того, это не единственное решение данной задачи. Думаю, что разбираясь в этом вопросе вы и сами сможете подкинуть ряд интересных и более гибких решений. Спасибо за внимание.

Похожие записи

Об авторе

adminGWP