[CSS/DIV] Tökéletesen megoldja a CSS oldal vízszintes középsését

Egy gyakori CSS módszer az elemek vízszintes középpontjába helyezésére

Az elemek CSS-sel való középpontba helyezése nem egyszerű – ugyanazok a legális CSS központosítási beállítások eltérően viselkednek különböző böngészőkben. Kezdjük néhány gyakori módszert, ahogyan az elemek vízszintesen középre helyezhetők a CSS-ben.

1. Automatikus margókkal történő központosítás

A CSS-ben az elemek vízszintes középesítésének preferált módja a margó tulajdonság használata—egyszerűen állítsd be a margin-bal és marginál-jobb tulajdonságokat automatára. Gyakorlati alkalmazásban létrehozhatunk egy konténerosztót ezekhez az elemekhez, amelyeket középre kell helyezni. Egy fontos dolog, hogy a tartály szélességét meg kell határozni:

div#container{ margin-left:auto; margin-right:auto; szélesség: 168px; }

Ez a megközelítés a legtöbb nagy böngészőben nagyon jól működik, még az IE6 Windowson is megfelelően megjeleníthető a szabványos megfelelőségi módban. Sajnos az IE alacsonyabb verzióiban ez a beállítás nem hoz középen helyezkedő hatást. Tehát ha ezt a módszert egy valódi projektben szeretnéd használni, akkor győződj meg róla, hogy a felhasználó IE böngészőverziója ne legyen alacsonyabb a 6.0-nál.

A támogatás hiánya ellenére a legtöbb tervező ezt a megközelítést ajánlja, amennyire csak lehet. Ezt a módszert tartják a CSS-szel történő elemszintű központosítás megvalósításának leghelyesebb és legésszerűbb módszere.

2. Használj szövegigazítást a középre helyezéshez

Egy másik módja az elemközépsés elérésének, hogy a text-align tulajdonságot használjuk, a tulajdonság értékét középre állítsuk, és alkalmazzuk a test elemre. Ez egy átfogó-véges hack, de kompatibilis a legtöbb böngészővel, így bizonyos esetekben természetesen elengedhetetlen.

Hacknek nevezik, mert ez a módszer nem a szöveg tulajdonságait alkalmazza a szövegre, hanem arra az elemre, amely a konténer. Ez plusz munkát is ad. Miután létrehoztuk a szükséges diveket az elrendezéshez, a szöveg-align tulajdonságot a testre kell alkalmazni a következő kód szerint:

body{ text-align:center; }

Lesznek problémák utána? A test minden leszármazottja középen áll.

Ezért írnunk kell egy másik szabályt, hogy a szöveg visszatérjen az alapértelmezett bal oldali igazításhoz:

p{ text-align:left; }

Elképzelhető, hogy ez a további szabály némi kellemetlenséget okoz. Ráadásul egy igazán követő böngésző nem változtatja meg a konténer pozícióját, csak a szöveget középre helyezi benne.

3. Használj automatikus margókat és szövegigazítást

Mivel a szöveg igazítási középpontozási módszere jó visszafelé kompatibilis, és az automatikus kitöltő módszert a legtöbb kortárs böngésző is támogatja, sok tervező a kettő kombinációját használja a központosítási effekt maximális böngészős támogatása érdekében:

body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; border:1pxsolidred; szélesség: 168px; text-align:left }

De ez mindig egy trükkös, és semmiképp sem tökéletes. Még további szabályokat kell írnunk a középen lévő konténerben lévő szöveghez, de legalább jól néz ki különböző böngészőkben.

4. Negatív külső margós megoldás

A negatív marzs megoldások messze nem egyszerűek olyan, mint negatív marzúságok hozzáadása elemekhez. Ez a módszer mind abszolút pozicionálást, mind negatív margós technikákat igényel.

Az alábbiakban a rendszer konkrét megvalósítási módszere látható. Először készíts egy konténert középre helyezett elemekkel, és helyezd el az oldal bal szélének 50%-át. Így a konténer bal margója az oldal szélességének 50%-ával kezdődik.

Ezután állítsd be a konténer bal oldali margóértékét a negatív tartály szélességének felére. Ez rögzíti a tartályt az oldal vízszintes irányának közepén.

#container{ background:#ffcurl(mid.jpg)repeat-ycenter; pozíció: abszolút; bal: 50%; szélesség: 760px; bal margó:-380px; }

Nézd, nincs hack! Bár ez nem a preferált megoldás, jó módszer, és nagyon sokoldalú – meglepő módon, hogy a NetscapeNavigator 4.x-ben sem működik gond nélkül, nem igaz? Ha a lehető legszélesebb böngészőtámogatást szeretnéd, ez a módszer a legjobb választás.