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

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

5 HOZZÁSZÓLÁS

  1. Hali!
    Szeretném megkérdezni,hogy ezeket a parancsokat hova kell tenni?Ezt ugy értem,hogy egy jegyzettömbe vagy hova?És hogy mi legyen a mentés neve?Meghogy ezt az index.htm mellé kell -e tenni??
    A választ előre is köszönöm!!

  2. A CSS fájlodba kell felvenni ezeket a sorokat és bármi lehet a mentés neve, lényeg hogy a HTML fájlod vonatkozó része mutasson erre a fájlra. A helyét szintén Te határozod meg.
    Ha bármi ebben nem volt érthető, akkor az alapokkal kellene kezdeni, ehhez tudom javasolni a jobb oldali menüben található CSS referencia menüpont alatti oktató anyagokat.

  3. így mégjobb:
    style.css

    1
    2
    3
    4
    5
    
    div#container
    {
    margin-left: 10%;
    margin-right: 10%;
    }

    ————————–
    index.html

  4. Üdv!

    És azt, hogy tudnám megoldani, ha van egy div ami a fenti technikával középre van igazítva (vízszintesen), de még azon belül is van egy div amit középre kellene igazítani. Am itt a margin-left és right X% már nem működik mivel akkor nem lesz teljesen középen!

  5. Helló Adam!

    Ha a diven belül a másik div helyett egy spam taget raksz, akkor szerintem működnie kell.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét