Створення сторінок, орієнтованих на центр з 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 буде вимерлим.
