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

Kapcsolódó bejegyzések:
  • A CSS-ben a középre igazítás mindig is nehéz feladat volt, mert a böngészők máshogyan értelmezik a CSS tulajdonságokat, ráadásul vertikális középre igazítás ninc …

  • CSS segítségével könnyen és gyorsan lehet a későbbiekben pillanatok alatt módosítható vízszintes menüt készíteni. Első körben a HTML (vagy PHP) oldal HEAD részéb …

  • CSS alapú legördülő horizontális menü készítését sajátíthatod el a leírás segítségével.Stílus:body { padding: 0px; margin: 0px; behavior: ur …

  • A különböző böngészők egyes elemek alapértelmezett tulajdonságait másképp értelmezik, ezeket egységesíti az alábbi kódrészlet (a css fájlba kell felvenni):…

  • Most, hogy elérkeztünk a 4. fejezethez (és leraktuk az alapokat), ideje praktikus dolgokat is csinálnunk végre. Első lépésben megoldjuk oldalunk központosított f …

A cikket beküldte: Harder (http://blog.harder.hu)

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. Harder says:

    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. noname says:

    így mégjobb:
    style.css

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

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

  4. Adam says:

    Ü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. Misu says:

    Helló Adam!

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

Szólj hozzá
a Honlap tartalmának középre igazítása c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>