Создание ориентированных по центру страниц с помощью CSS

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

  • Просмотров |

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

Таким образом, чтобы сосредоточить свою страницу, оберните содержимое в контейнер — это «обертка». Вот так:

<body>
<div id="wrapper">
<div id="content">
<p>This is where your entire content would go:
- header, navigation, footer, whatever.  
It would likely be in different divisions, but for this demonstration, 
we do not need those details.</p>
</div> (this closes the 'content' division)
 </div> (this closes your 'wrapper' div)
</body>
</html>

И теперь мы используем две простые строки в CSS для перемещения вещей в середину:

Во-первых, нам нужно предоставить нашей обертке ширину:

#wrapper {
      width: 980px;
}

Как широко вы устанавливаете эту оболочку, конечно, зависит от вашего дизайна. Вместо пикселя вы можете использовать% или даже em, но пиксель, вероятно, лучший выбор.

И вот волшебная палочка:

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

И вуаля — идеальный сайт! Что это за линия:

margin: 0 auto;

Он сообщает браузеру о потере нуля в верхнюю и нижнюю части раздела обертки (конечно, вы можете настроить это по своему усмотрению) и автоматически определять правое и левое поля для центрирования обертки (которая должна оставаться «авто» ‘для центрирования для работы).

Постскриптум — В olden-aka pre-IE6 дня это нужно было сделать, добавив

body {text-align: center;}

и затем, чтобы нейтрализовать все это,

#wrapper {text-align: left;}

Но, слава богу, эти дни ушли. Было нормально НЕ поддерживать что-то меньшее, чем IE6 уже давно, и даже IE6 вот-вот исчезнет.

ТЕГИ:

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля