Центровані веб-сторінки з 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. – У старому IE6 дня це потрібно було зробити, додавши
body {text-align: center;}
і потім, щоб нейтралізувати все це,
#wrapper {text-align: left;}
Але, слава богу, ці дні пішли. Було нормально НЕ підтримувати щось менше, ніж IE6 вже давно, і навіть IE6 ось-ось зникне.
