Центровані веб-сторінки з 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 ось-ось зникне.

Напишіть відгук

Цей сайт використовує Akismet для зменшення спаму. Дізнайтеся, як обробляються ваші дані коментарів.

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