Ha szoktál weboldalakat készíteni, bizonyára szembesültél már a középre igazítás problémájával. Jelenleg több módszer is van a probléma orvoslására. Ebben a rövid bejegyzésben a nekem legjobban bevált 3 módszert mutatom be.
Vízszintes (horizontal) középre igazítás
Az első beállítás a vízszintes pozicionálás. Ez egy elég egyszerű beállítás, gondolom sokan ismeritek és használjátok, de azért leírom.
1 2 3 4 5 | .horizontal{ margin:0 auto; width:200px; height:200px; } |
Mint láthatjuk meg kell adnunk a szélességet és egy margó beállítást ahol a jobb és bal érték auto. Ez fogja középre igazítani az aktuális divet. A magasság megadása nem kötelező.
Ez a módszer a block szintű elemeknél működik mint pl. (divek, paragrafusok, h1, stb.). Az inline elemeknél pl.(hiperlinkek, képek), szükség van egy kiegészítő css beállításra, mégpedig a display:block -ra.
Vízszintes (horizontal) és függőleges (vertical) középre igazítás
A mindkét oldalról történő középre pozicionálás már kicsit trükkösebb, de aggodalomra semmi ok. Itt már szükség van a szélesség mellett a magasság megadására is.
1 2 3 4 5 6 7 8 | .horiz-vert{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; } |
Fontos, hogy absolute pozicionálást használjunk, hiszen így érhetjük el, hogy a böngésző ablakától, megadott távolságra helyezzük el a kívánt div-et. A top, left érték 50% -re állításával már majdnem középen van. Ezért adjunk meg neki még egy negatív margót, ami balra, a szélesség fele és fölfelé pedig a magasság fele lesz, jelen esetben a 300px és 200px fele. Így már tökéletesen középen kell legyen a tartalom.
Vízszintes (horizontal) és függőleges (vertical) középre igazítás jQuery-vel
Mint az imént már említettük, a css megoldás csak akkor működik ha fix méreteket használunk. Ilyenkor jön szóba a jQuery.
Illesszük a következő kódot egy js fájlba és hívjuk meg vagy az oldalunk head részébe.
1 2 3 4 5 6 7 8 9 10 11 | $(window).resize(function(){ $('.className').css({ position:'absolute', left: ($(document).width() - $('.className').outerWidth())/2, top: ($(document).height() - $('.className').outerHeight())/2 }); }); $(window).resize(); |
A .className osztályt cseréljük a pozicionálni kívánt div nevére és a többit a jQuery elvégzi helyettünk. Az outerWidth és outerHeight felelős a középre igazításért mivel ezek nem a div szélességét és magasságát figyelik hanem a körülöttük lévő területét (outer).
Az előnye a módszernek, hogy nem kell fix méretű div. A hátránya pedig hogy javascript futtatás szükséges, de ez azt hiszem nem nagy probléma.
Ne feledjük, hogy a jQuery parancs futtatásához szükségünk lesz a jQuery pluginra is.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Kapcsolódó cikkek
Pár a vertikális és horizontális középre igazítással foglalkozó oldal és cikk.
- CSS vertical centering using float and clear – crossbrowser (?)
- Vertical Centering in CSS
- Vertical Centering With CSS
- How to: vertical centering with CSS
Zárszó
A megoldás rejtélyes, sok oldalon láttam a bizonytalan kezdő fejlesztőket ilyen, és ehhez hasonló kérdéseket feltenni. Remélem a cikkből mindenkinek sikerül majd megoldani a problémát.
Szólj hozzá!