b{}xm{}dels.toxin.hu

Balra igazítás és tolás után, – a várható téma- előbbiek fordítottjai a jobbra igazítás és tolás következne, de ehelyett a középre igazításról fogunk ‘beszélni’, lévén előbbiek a balra tolás/igazításnak a megfordítottjai, csak a margin-left/right ill. left/right tulajdonságok értékeinek fel/megcseréléseiben különböznek tőlük(ilyenre szokták volt írni, hogy : házifeladatnak) .

Ebben a bejegyzésben szereplő minták felhasználásával, egy elemet ill. annak tartalmát szülőeleméhez ill. legközelebbi pozicionált őséhez képest tudjuk majd középre igazítani.

Ha az IE Netrenderel-el – firefox extension is van már hozzá – megnézzük a példafájlról ill. a lehetséges, és a majd ie8 alatt mind jól megjelenített , mintákról készült, ie6 által lerenderelt lapot , láthatjuk, hogy lehetőségeink jelen pillanatban eléggé behatároltak, mindenesetre lássuk őket:

Középre igazított méretezett statikus blokk elem

BLOKK-SZELEKTOR { position:static; text-align:center;
width:+ÉRTÉK; margin-left:auto;
margin-right:auto; }

Közpre igazított tartalmazó elem széles statikus blokk elem

BLOKK-SZELEKTOR { position:static; text-align:center;
width:auto; margin-left:+ÉRTÉK;
margin-right:+ÉRTÉK; }

Középre igazított méretezett elem

SZELEKTOR { position:absolute; text-align:center;
width:+ÉRTÉK; left:0; margin-left:auto;
right:0; margin-right:auto; }

Középre igazított tartalmazó széles elem

SZELEKTOR { position:absolute; text-align:center;
width:auto; left:0; margin-left:+ÉRTÉK;
right:0; margin-right:+ÉRTÉK; }

A könyvben: “An element can’t be shrinkwrapped if it is centered” szerepel, ezért, a Pozicionálások a gyarkorlatban IV. : Statikus tábla elemek igazítása és eltolása idevonatkozó mintáját beszúrom ide:

Középre igazított tartalom széles tábla elem

HTML minta

<table><tr><td>TARTALOM</td></tr></table>

CSS minta

SZELEKTOR { position:static;
width:auto; margin-left:auto; margin-right:auto; }

a fenti mintákat egy kicsit elemezve: tartalmat text-align:center CSS tulajdonság-érték pár megadásával tudunk beállítani, statikus elem középreigazításakor használhatunk fix, vagy dinamikusan változó szélességet, előbbi esetén a jobb-bal margókat:auto-ra utóbbi esetben egy fix értékre kell beállítani, zérus értékre állítás esetén lesz az elem tartalmazóelem széles. Abszolút pozicionált elemet használva, ekkor az elemet legközelebbi pozicionált őséhez képest igazíthatjuk középre, előbbi értékekhez még egy left,right:0 CSS tulajdonság-érték párt is hozzá kell adnunk.

Horizontálisan tartalom szélesre egy elemet, ezek szerint, csak táblázat felhasználásával tudunk beállítani(lásd utolsó minta). ie6 képtelen abszolút elemeket középre igazítani , ie7 már elboldogul az abszolút széthúzott elemmel középre igazított méretezettel továbbra sem, ie8b1: már helyesen jeleníti meg őket, Firefox2-3rc2,Opera-Safari (utolsó elérhető verziók, win) szintén.

A példafájlon látható hogy méretezett statikus elem esetén a margók mérete, míg fix margóbeállítás esetén az elem szélessége fog dinamikusan változni. Amennyiben százalékot állítunk elem, vagy margószélességnek, ezek a befoglaló elem szélességének megadott százalékos arányában, dinamikusan fognak átméreteződni.

Következő bejegyzésben a már középre igazított elemen fogunk eltolást kieszközölni :
Hajrá CSS