Honlap tartalmának középre igazítása

Alapvetően 2 módja van a CSS alapú lapok tartalmának középre igazításához attól függően, hogy a lap rugalmas vagy fix szélességű.

Rugalmas lapszélesség

Ez esetben %-osan adod meg a méreteket, pl. a lap szélessége legyen 80%-a a mindenkori böngészőablak szélességének. Ez azt jelenti, hogy a lap mellett pl. 10-10% hely kell hogy maradjon. A kódot így add meg:

1
2
3
4
5

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

A margók (margin) értékét megadhatod "em"-ben, "pixel"-ben vagy "százalékos" értékként is.

Fix lapszélesség

Ez esetben a tartalom és a böngészőablak közti területnek (margónak) kell rugalmasnak lennie, tehát a kódot így add meg:

1
2
3
4
5
6

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

Viszont ezt pár böngésző nem kezeli le rendesen:

• NN4 (Mac and Win)
• Win/IE4
• Win/IE5
• Win/IE5.5
• Win/IE6 (quirks-mode)

2 egyszerű szabállyal kiegészítve a kódot ezt a problémát ki lehet védeni az összes fent említett böngésző esetében (kivétel az NN4)

A "body" középre igazítása

Mivel ezek a böngészők figyelmen kívül hagyják az "auto margin"-t, használd a "text-align: center"-t. Ha ezt a body-ban adod meg, a doboz középre fog kerülni. Így nézne ki:

1
2
3
4
5
6
7
8

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

Az egyetlen hiba e kiegészítéssel, hogy a lap egész tartalma középre lesz igazítva. Ezért egy újabb szabályt kell közbeiktatni de most a dobozhoz, az alábbi módon:

1
2
3
4
5
6
7
8
9

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

Forrás: maxdesign.com.au