Центрированные веб-страницы с HTML и 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; }
И вуаля — идеальный сайт! Что это за линия:
margin: 0 auto;
Он сообщает браузеру о потере нуля в верхнюю и нижнюю части раздела обертки (конечно, вы можете настроить это по своему усмотрению) и автоматически определять правое и левое поля для центрирования обертки (которая должна оставаться «авто» ‘для центрирования для работы).
P.S. — В старом pre-IE6 дня это нужно было сделать, добавив
body {text-align: center;}
и затем, чтобы нейтрализовать все это,
#wrapper {text-align: left;}
Но, слава богу, эти дни ушли. Было нормально НЕ поддерживать что-то меньшее, чем IE6 уже давно, и даже IE6 вот-вот исчезнет.
