html div img vertical-align:middle probléma és egy lehetséges megoldása

Meguntam, hogy minden ilyen vertical-align-os igazítást táblázattal oldok meg. Most megint ebbe a problémába ütköztem és végre rászántam az időt a probléma megoldására.

Az alapprobléma a következő:
Van egy fix méretű divünk és benne egy képi elemet akarunk vertikálisan és horizontálisan is középre igazítani. Ez egy hétköznapi probléma.

Miért írom én most ezt a cikket?
Sok helyen olvastam utána, hol és hogyan érdemes megoldani ezt a problémát. Sok helyen a kérdezőt, oltogatták és céloztak a megoldásra pl.: a weblaboron… olyan kioktatós jellegű hozzászólások voltak nagy számban, persze tisztelet a kivételnek. Nos én ezeket a bejegyzéseket vagy 5 ször átrágtam és nem igazán jutottam el a megoldáshoz, mivel elméleti szinten nagyon jól megmondják, csak példával nincs illusztrálva! Igazán akkor tudja megérteni az ember, ha megkeresi maga a megoldáshoz vezető utat. Nekem ez cirka 10 órámba került…

A feladat:
Adott egy fix méretű div és benne vertikálisan és horizontálisan is középre akarunk helyezni egy képi elemet.

Megoldás a horizontális problémára:

<div align="center"></div>

🙂

A vertikális elhelyezés megoldása már problémás. A CSS vertical-align parancsa inline, vagy table elemekre van hatással. Ha egy diven belül egy képet akarunk, ezzel vertikálisan középre helyezni, bizony nem fog működni. Ha több kép szerepel ebben a divben, akkor ezek egymáshoz viszonyítva egy sorba fognak rendeződni a vertical-align:middle; hatására, de egy kép esetén semmi hatása nincs.
Mi ennek az oka?

Mint kiderült, a div elemen belül létrejön egy láthatatlan sor és ehhez vertikálisan középre igazítja a böngésző a képet. Nyílván, ha az ember nem tudja, hogy van egy ilyen sor, akkor ennek a magasságát, sem tudja beállítani. Viszont most, hogy már tudjuk, hogy létezik ilyen a line-height: CSS parancsal be tudjuk állítani ennek a sornak a magasságát, ezt érdemes a div magasságával megegyező méretűre állítani.
Ekkor már van egy fix méretű div elemünk, aminek meghatároztuk a sormagasságát és ekkor már a kép középre helyeződik, de a vertikális középre helyezés eredménye képpen a kép mégsincs teljesen középen. Ugyanis a böngésző a kép alját tekinti a kép kiinduló pontjának, így a kép alja helyezkedik el vertikálisan középen, de a teljes kép a div felső határához közelebb van. Ezért tapasztalatom szerint érdemes a line-height: magasságnak egy kicsit nagyobb értéket beállítani mint a div magassága.

Pl.:

<div style="margin-top:30px; width:200px; height:200px; line-height:220px; background:#000; color:#CCC; vertical-align:middle;"><img src="/sajatkepem.jpg" /></div>

Megj.:a margin-top:30px; csak a látványosság miatt került bele a színezéssel együtt…

Ez a megoldás addig működik is míg nem definiálunk dokumentum típust 😀 azaz: <!DOCTYPE HTML> Nah ez a finomság fórumok bugyrában van elrejtve…

Azaz nesze semmi fogd meg jól… ez a megoldás eléggé problémás így, szerintem.

De nem adjuk fel, csak azért is, nehogy már ne lehessen, mindenhol megoldják, mi is megfogjuk.

Egy lehetséges megoldás a következő lehet IE8, IE9, FF, Safari, Chrome, Opera böngészőkre, és egy kis mahinálással IE7-re is. Sajnos ez van 😦

Nos, a fenti megoldást elvejtük 😀
A kódot az alábbi szerint módosítjuk:

<div class="img_block"><div><img src="/sajatkepem.jpg" /><div></div><style type="text/css" media="screen">.img_block{margin-top:30px;width:200px;height:200px;display:table;}.img_block div{display:table-cell;vertical-align:middle;text-align:center;<!--[if IE 7]>display: block;margin: 17px 0px 0px 0px;<![endif]-->}</style>

“Sajnos” visszatérünk a táblázatszerű megoldáshoz, de a fenti megoldás a böngészők majdnem mindegyikén működik, csak IE7 miatt kell egy kicsit mahinálni. Ezzel a megoldással már a Doctype-ot is beállíthatjuk, ettől függetlenül elvileg ez a megoldás életképes.

Reklámok

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s