Створення сторінок, орієнтованих на центр з 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;
}

Наскільки широко ви встановите цю обгортку, звичайно, залежить від вашого дизайну. Замість пікселя, ви можете використовувати% або навіть їх, але піксель, ймовірно, кращий вибір.

І ось приходить чарівна паличка:

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

І вуала – це ідеально центрований веб-сайт! Що це за лінія:

margin: 0 auto;

Вона повідомляє браузеру, що до верхньої та нижньої частини обгорткового поля можна встановити маржу нуля (звичайно, ви можете налаштувати це за вашим бажанням) і автоматично визначати правий та лівий поля для центру обгортки (це має залишитися автоматично “для того, щоб зосередитися на роботі).

П.С. – У старому – як і раніше, до IE6 днів, це потрібно було зробити, додавши

body {text-align: center;}

а потім, щоб нейтралізувати все це, а

#wrapper {text-align: left;}

Але слава Богу, ці дні вже не пішли. Було добре НЕ підтримувати щось менше, ніж IE6 протягом тривалого часу, і навіть IE6 буде вимерлим.

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

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

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