Hasznos CSS HTML trükk tartalom középre igazítására

Ez igazából nem haladó HTML, de nem is kezdő, szóval gondoltam, ide rakom. Egy egyszerű kis trükkről van szó, amely segítségével egy oldalt a képernyő közepére lehet igazítani, méghozzá nemcsak vízszintesen (azt tudjuk, hogy az align="center"-rel kell), hanem függőlegesen is. Lehet, hogy volt már olyan designod, ami mondjuk iframes, szóval a magassága nem változik, és azt szeretted volna, hogy teljesen középen jelenjen meg. Ilyenkor valószínűleg pár üres bekezdést raktál a design fölé, de ez abszolut nem praktikus, mert egyrészt minden böngésző mást mutat, és különböző felbontással is máshogy jelenik meg... így lehet, hogy az egyik látogatónak lecsúszik a látható részről a design, és görgetnie kell, a másiknak meg túl felül jelenik meg, és nem teljesen középen. Egy egész egyszerű módszerrel ki lehet küszöbölni ezt a problémát.

A folyamat

Azt ugye tudjuk, hogyan kell vízszintesen középre állítani mondjuk egy táblázatot. Viszont emlékezz vissza, a HTML tutorialoknál elmagyaráztam, hogy egy táblázat celláján belül a függőleges igazítást is be lehet állítani. Csupán annyit kell csinálnod, hogy kreálsz egy egycellás táblázatot, aminek nincs kerete, se háttere (szóval teljesen láthatatlan), és a vertical-align-t middle-re állítod. Ezen a cellán belül lesz majd a tartalom (szóval a design, vagy kép, vagy bármi), és teljesen középre lesz igazítva minden irányból. Hogy biztos megjelenjen mindenhol, ezt CSS-ben állítjuk be. Figyeld ezt a kódot:

**TARTALOM HELYE**

Na de ezzel egy baj van: a táblázatok height attribútumát néhány esetben nem fogadják el a böngészők, még akkor sem, ha CSS-ben van megadva, mint a fenti példában. Egy rövid kódot be kell még illeszteni a CSS-ben, hogy működjön ez a trükk:

html,body{
margin:0;
height:100%;
border:none;
}

Ennyi, a tartalmat pedig a kódban jelölt helyre illeszd be. Remélem, félig-meddig érthető ez a módszer... Számomra nagyon hasznos, hisz kisebb oldalaknál (pl. egy fanlistingnél) sokszor megéri az iframe-s design, vagy akár egy belépő képet is szépen középre lehet igazítani így. Sok sikert, remélem hasznát veszitek ennek is!

Tags: