При досить простій стуктурі сайту можна використовувати тільки один блок. Розмістити його по центру можна різними способами. Все залежить від того, що ви хочете бачити в результаті.
Якщо ширина блоку не повинна мати фіксованої довжини, можна просто поставити опис координат і розмірів у відсотках. При необхідній ширині блоку в 60 відсотків, нам необхідно буде призначити блоку ширину у 60 відсотків, властивість left в даному випадку буде дорівнює 20 відсоткам.
#centercontent
{ background-color:#FFDF7D;
border:2px solid #000000;
position:absolute;
left:20%;
width:60%;
top:10%; }
Ми отримали «гумовий» блок, що змінює свою ширину в залежності від ширини екрана. Для блоків з текстовим змістом цього цілком достатньо.
Як «гумовий», так і блок з фіксованою шириною можна розмістити по центру і іншим способом.
body {
margin:30px;
padding:0px;
text-align:center;
}
#centercontent {
width:500px;
margin:0px;
text-align:left;
padding:15px;
border:1px dashed #000000;
background-color:#ffffff;
}
Зверніть увагу! У Explorer при завданні «центрування» всього вмісту BODY вміст всіх блоків також буде орієнтовано по центру. У цьому випадку рекомендується в нашому блоці явно прописати – text-align: left;. Мабуть, у Explorer проблеми з успадкуванням…
Ще один спосіб, дещо важкуватий, але дуже цікавий. Крім того, він дає поняття про можливість виправлення помилок Explorer. Взято з того-ж bluerobot.
body {margin:0px;
padding:0px;}
#Content {
position:absolute;
left:50%;
width:500px;
margin-top:50px;
margin-left:-250px; /* For IE5/Win. */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
body>#Content {
margin-left:-266px; /* Correct value. */
}
Приклад наводиться в «первинному» вигляді. Автор ідеї – Simon Coggins. Первісна ідея – завдання від’ємного значення margin-left, переробка до «ідеального» варіанту – автор bluerobot.
Якщо не всі зрозуміли – цифра 266 виходить як результат складання 250px як половини центрованого блоку, 15px відступу і 1px рамки. Рамка та відступ й дають погрішність у 16px.
***
Це переклад статті.