Центрування в CSS - забава для всіх!

Як ви центруєте частину сторінку, використовуючи CSS? Існує два основні способи й вибір завіст від того, використовуєте ви гумовий або фіксований дизайн.

Центрування блоків із плаваючою шириною

Щоб отцентрировать блок із плаваючою шириною досить виставити бічні зовнішні відступи (margin) для блоку в пикселях або відсотках.

div#container
{
	margin-left: 10%;
	margin-right: 10%;
}

Центрування блоків з фіксованою шириною

Теоретично, для центрування блоку фіксованої ширини досить визначити бічні зовнішні відступи як auto

div#container { 
margin-left:auto;
margin-right:auto;
width:50em; 
}

На жаль не у всіх браузерах блок буде розташовуватися по центру використовую цей метод. ДО таких браузерів ставляться:

So why not add Netscape 2 to your browser detect? Because it doesn't solve anything.

NN4 (Mac and Win)
Win/IE4>
Win/IE5
Win/IE5.5
Win/IE6 (при включеному quirks-mode)

Якщо додати два прості правила, ця проблема може бути вирішена у всіх згадані вище браузерах, крім NN4.

1. Центрування контейнера body

Якщо браузери ігнорують бічні відступи встановлені як auto, то завдяки правилу text-align: center для контейнера body уміст буде розташовуватися по центру.

body { 
text-align:center; 
}
div#container { 
margin-left:auto;
margin-right:auto;
width:50em; 
}

2. Скидання властивості text-align

body { 
text-align:center; 
}
div#container { 
margin-left:auto;
margin-right:auto;
width:50em;
text-align:left; 
}

Valid XHTML 1.0