b{}xm{}dels.toxin.hu

Középre igazításkor alapvető feladat, hogy egy elemet annak legközelebbi őt tartalamazó pozicionált ősének vertikális közepére igazítsuk. Túl az előbbin, cél még, hogy a középre igazítás automatikus legyen, azaz a tartalamzó elem magasságának változásákor, ne kelljen az elemet folyamatosan kézzel újra és újra középre igazítsuk. E két célnak próbálnak megfeleni a bejegyzésben szereplő minták.

Essünk is túl a már szokásos a feketelevesen, ie6-ie7 netrenderer-el által generált kimenet, a render-ből generált képből kiderül, -hasonlóan a korábbi jegyzetekben szerepelt mintákhoz- ie6 képtelen az abszolút pozicionált elemek középre igazítására, ie7 alatt kezdtek a dolgok rendbe jönni, de még itt sincs lehetőségünk méretezett elemek középre igazítására, kizárólag széthúzott abszolút pozicionált elemekkel tehetjük ezt meg (height:auto), ie8,opera,safari,chrome,fx2-3 (utolsó publikus verziók), a jegyzetben szereplő minták egyformán jelennek meg.

Középre igazított inline elem

SZELEKTOR { line-height:+ÉRTÉK; }

Középre igazíott méretezett abszolút elem

SZELEKTOR { position:absolute; height:+ÉRTÉK;
margin-top:auto; margin-bottom:0;
top:0; bottom:0; }

Középre igazított tartalamzó elem széles abszolút elem

SZELEKTOR { position:absolute; height:auto;
margin-top:±ÉRTÉK; margin-bottom:±ÉRTÉK;
top:0; bottom:0; }

Mindezeket a példafájlon megszemlélve, a tanúságok, szűk keresztmetszet: ie6-7 ergo, inline elemek gond nélkül középre igazíthatóak (első minta böngészőfüggetlen), abszolút elemeket mechanikusan középre tolhatunk, de böngészőfüggetlen automatikus méretezésre vagy középen tartásra ne is számítsunk amíg ie6 köztünk van.

A minták működéséről, láthatjuk, hogy a pozicionálásnak három lehetséges módja van, elsőnek az inline, a tartalmazó elemnek konkrét méret legyen beállítva, majd adjuk meg a line-height tulajdonságának ugyanezt az értéket, legyen px vagy % stb, a többi a böngésző dolga, adhatunk meg kisebb vagy nagyobb értéket is, ezzel az inline elem vertikális pozicióját tudjuk befolyásolni az-az eltolás hozható létre, ekkor egy overflow:hidden tulajdonság is kerüljön beállításra különben ie6 széttolhatja a tartalmazó elemet, megváltoztathatva az eredetileg beállított magasság értéket.

Abszolút pozicionálások, látható a két módozat közti különbség, vagy a height-nek adunk meg konkrét éréket és a margin-top,-bottom értékeknek auto-t, vagy vice-versa. Első esetben a konténerelem magasságának változásait nem követi az elem, utóbbi esetben ahogy változik a konténer úgy változik a középre rendezett elem magassága is.

Sajna statikus vagy tartalommagas elemet nem tudunk középre rendezni, a már középre igazított abszolút elemeken belüli elemek középre igazításakor a

Középre igazított tartalamzó elem széles abszolút elem

SZELEKTOR { position:absolute; height:auto;
margin-top:±ÉRTÉK; margin-bottom:±ÉRTÉK;
top:0; bottom:0; }

mintát kell mégegyszer felhasználnunk.

hajrá CSS