Alapvetően 2 módja van a CSS alapú lapok tartalmának középre igazításához attól függően, hogy a lap rugalmas vagy fix szélességű.
Rugalmas lapszélesség
Ez esetben %-osan adod meg a méreteket, pl. a lap szélessége legyen 80%-a a mindenkori böngészőablak szélességének. Ez azt jelenti, hogy a lap mellett pl. 10-10% hely kell hogy maradjon. A kódot így add meg:
div#container
{
margin-left: 10%;
margin-right: 10%;
}A margók (margin) értékét megadhatod "em"-ben, "pixel"-ben vagy "százalékos" értékként is. #### Fix lapszélesség
Ez esetben a tartalom és a böngészőablak közti területnek (margónak) kell rugalmasnak lennie, tehát a kódot így add meg:
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}Viszont ezt pár böngésző nem kezeli le rendesen: - NN4 (Mac and Win)
- Win/IE4
- Win/IE5
- Win/IE5.5
- Win/IE6 (quirks-mode)
2 egyszerű szabállyal kiegészítve a kódot ezt a problémát ki lehet védeni az összes fent említett böngésző esetében (kivétel az NN4)#### A "body" középre igazítása
Mivel ezek a böngészők figyelmen kívül hagyják az "auto margin"-t, használd a "text-align: center"-t. Ha ezt a body-ban adod meg, a doboz középre fog kerülni. Így nézne ki:
body { text-align: center; }
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
}Az egyetlen hiba e kiegészítéssel, hogy a lap egész tartalma középre lesz igazítva. Ezért egy újabb szabályt kell közbeiktatni de most a dobozhoz, az alábbi módon:
body { text-align: center; }
div#container
{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: left;
}Forrás: maxdesign.com.au
Harder
Profil
Korábbi hozzászólások (5)
A régi blogon érkezett hozzászólások archívuma. Új hozzászólást már nem lehet írni.
Hali!
Szeretném megkérdezni,hogy ezeket a parancsokat hova kell tenni?Ezt ugy értem,hogy egy jegyzettömbe vagy hova?És hogy mi legyen a mentés neve?Meghogy ezt az index.htm mellé kell -e tenni??
A választ előre is köszönöm!!
A CSS fájlodba kell felvenni ezeket a sorokat és bármi lehet a mentés neve, lényeg hogy a HTML fájlod vonatkozó része mutasson erre a fájlra. A helyét szintén Te határozod meg.
Ha bármi ebben nem volt érthető, akkor az alapokkal kellene kezdeni, ehhez tudom javasolni a jobb oldali menüben található CSS referencia (www.tutorial.hu/cimke/css+referencia) menüpont alatti oktató anyagokat.
így mégjobb:
style.css
div#container
{
margin-left: 10%;
margin-right: 10%;
}
--------------------------
index.html
Üdv!
És azt, hogy tudnám megoldani, ha van egy div ami a fenti technikával középre van igazítva (vízszintesen), de még azon belül is van egy div amit középre kellene igazítani. Am itt a margin-left és right X% már nem működik mivel akkor nem lesz teljesen középen!
Helló Adam!
Ha a diven belül a másik div helyett egy spam taget raksz, akkor szerintem működnie kell.
Van hozzáfűznivalód? Írj nekem közvetlenül.
Kapcsolat