Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

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

Author wmas wmas | Category Category CSS

Здравствуйте, уважаемые читатели моего блока Курилка.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)

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

Publish: Понедельник Апр 13, 2009

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

feed for comments on this post

  • Комментарий #2250 author: Nalivaeff Reply
    publish: Вторник Апр 14, 2009 at 9:02 дп

    Текст в #out тоже будет центрироваться?

  • Комментарий #2251 author: wmas Reply
    publish: Вторник Апр 14, 2009 at 10:48 дп

    2Nalivaeff: hi! CSS-свойство text-align прописанное для body сделает именно это. Поэтому для #out мы прописываем своё выравнивание текста, в данном случае — выравнивание по левому краю (left).


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress