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.

Zend Framework – Céges Demo portál – CSS

Manapság a portálok kinézetéért nagyrészt a CSS fájlok illetve azok tartalma a felelős, ha gyorsan kell számunkra egy alap CSS fájl amiben az alapkinézet megvan, nem nekünk kell rájönnünk s kitalálunk kipróbálnunk, hogyan is lehet megoldani az elrendezést. Manapság sok ingyenes template CSS létezik ami kiindulásnak tökéletes lehet számunkra.

A weben böngészve találhatunk többféle előre legyártott css templatet a http://www.arth2o.hu/css/oldal ezek egyike. Amelyik template közel áll elképzelésünkhöz, érdemes azt letöltenünk s a továbbiakban azzal dolgoznunk. Saját magunk is megszerkeszthetjük de lévén, hogy ez a cikk sorozat a Zend Frameworkről szól ezzel nem fogunk sokat foglalkozni, ugyanis a egy jó design kifejlesztéshez grafikus szükséges