Függőleges központosítás css használatával
Számos lehetőség van az objektumok függőleges központosítására a CSS használatával, de néha nehéz kiválasztani a megfelelő verziót. Megmondom Önnek a legjobb lehetőségeket, és hogyan hozhat létre egy kis, központú weboldalt.
Nem könnyű végrehajtani a függőleges központosítást a CSS-sel. Vannak olyan lehetőségek, amelyek egyes böngészőkben nem működnek. Tekintsünk át 5 különböző módot a tárgyak függőleges központosítására, a lehető legmagasabb szintű és professzionális szinten.
Ez a módszer bizonyos div - táblázatok kijelölését jelenti. Ezért beállíthatjuk a központosítást a táblázat függőleges vonalbeli attribútumának (amely különbözőképpen működik a különböző elemekkel).
ellenérvek
→ Nem működik az Internet Explorerben (még 8 béta verzióban)
→ Összetévesztés a címkékben (ami nem olyan rossz, de ez egy tisztán személyes ügy)
Ez a módszer abszolút pozíciót (abszolút), ahol a csúcsmutató 50% lesz, a felső megengedett eltérés a tartalom magasságának felénél fogva negatív lesz. Ez azt jelenti, hogy az objektum magasságának rögzített számmal kell rendelkeznie, amelyet a CSS határoz meg.
Mivel a magasság rögzítésre kerül, valószínűleg meg kívánja adni egy automatikus túlcsordulást (automatikus) a 96-as divathoz. Ha a tartalom túl nagy, akkor a görgetés megjelenik, ahelyett, hogy meghaladná a div # 96 hatókörét;
nyalánkság
→ Minden böngészőben fog működni
→ Nem kell összetéveszteni a címkéket
ellenérvek
→ Ha nincs elegendő hely, a tartalom elvész. Olyan ez, mintha a div az oldal kódja, és a felhasználó csökkenti a böngészőablakot. A görgetés nem jelenik meg.
Ezt a módszert alkalmazva egy div-ot helyezünk el a tartalomblokk tetejére. Ehhez 50% magasságot adunk meg, és az alsó rész megengedett eltérése megegyezik a tartalom magasságának levonásával (margin-bottom: -contentheight). Ezután a tartalom felülről jelenik meg, és a közepén fejeződik be.
nyalánkság
→ Minden böngészőben fog működni
→ Ha nincs elegendő hely (pl. Amikor a böngészőablak csökkent), a tartalom nem lesz levágva - a görgetés megjelenik.
ellenérvek
→ Csak aggódhat, hogy ez a módszer üres, kiegészítő elemet igényel (ami nem olyan rossz, de ez tisztán személyes ügy).
Ez a módszer abszolút pozícionálást alkalmaz (helyzet: abszolút érték); div, rögzített magassággal és szélességgel. Ezután a div # 96; y-t felülről lefelé nyújtjuk (felső: 0; alsó: 0), de ez lehetetlen, mivel rögzített magassága van. Ezért beállítjuk az automatikus margót (automatikus margó), amely a tartalmat a központ közepén osztja el. Ez nagyon hasonlít ahhoz, amikor a tolerancia 0-ra van állítva automatikusan (margó: 0 auto) a vízszintesen középpontba helyezett tartalomblokkhoz.
nyalánkság
→ Nagyon könnyen megvalósítható
ellenérvek
→ Nem működik az Internet Explorerben (de 8 béta verzióval működik)
→ Ha nincs elég hely, a tartalom le lesz vágva, és a görgetés nem jelenik meg.
Ez a módszer csak egy külön szövegsorra fog összpontosítani. Adja meg a vonal magasságát (magasság) az objektum magasságához, és a szöveg pontosan a középpontban található.
nyalánkság
→ Minden böngészőben működik
→ Ha nincs elég hely, nem vágja el a tartalmat
ellenérvek
→ Csak szöveggel működik (nem lehetséges blokk elemekkel)
→ Pontosan megszűnik, ha egynél több sort használ (például vonal mozgatásakor)
Ez a módszer nagyon alkalmas kis elemekre, például akkor, ha a szöveget középpontba helyezi egyetlen gombnyomással vagy egy mező egyetlen szövegsorához.
Tehát milyen módszerrel választhatsz?
Kedvenc beállításom a 3. szám - az úszó tartalom használata. Ez a lehetőség nem jelent jelentős hátrányokat. Mivel ez a lehetőség mindkét előnnyel jár: más elemeket helyezhet el a tartalom tetején, és az ablak csökkentése esetén a központosított tartalom nem fogja elfedni a többi elemet.
Most már tudja, hogyan kell ezt kezelni. Kezdjük létrehozni egy kicsi, de érdekes honlapot. A munka végeztével a projekted így fog kinézni:
Jó lenne kezdeni a szemantikai jelöléssel. Itt van az oldalunk hozzávetőleges szerkezete:
#floater
#centred
#side
#logo
#nav
#content
#bottom
Ezután az xhtml kódot használja:
Most a Kaszkád stíluslapjain (CSS) dolgozunk egy kicsit az oldalunkon kívül. Tedd ezt a kódot egy szövegfájlba, és adja meg a stílusok neveit. Css, az oldalunk a HTML-kód egy speciális vonalán keresztül fér hozzá.
Mielőtt meghatároznánk a tartalmat vertikálisan középpontba helyezni, az oldal kódjának testét 100% -os magasságra kell feszíteni. Mert ez a magasság jelzése a kitöltés és a tűréshatáron belül van, amit nulla értéket adtunk, ami azt jelenti, hogy a görgetés nem jelenik meg.
A lebegő "margó-alsó" objektum aljának megengedett eltérésének jelzése a tartalom fele legyen, ami -200px, ha a tartalom magassága 400px.
Van valami ilyesmi:
A "központosított" elem szélessége 80%. Ez biztosítja, hogy a webhely egy kicsit kicsi kijelzők, és jó nagy kijelzők (én viszonylag nagy monitor egy csomó régi oldalakat néz kis blokk a bal felső sarokban, és ez egy kicsit idegesítő). Ez jobban ismert - úszó jelölés. A minimális és maximális szélesség (minimális szélesség / maximális szélesség) szintén meg van határozva, így a webhely nem lesz túl nagy vagy túl kicsi. Bár az Internet Explorer nem támogatja ezeket az attribútumokat. Nyilvánvaló, hogy helyettük egy fix szélességet kell választania.
Mivel a "#centered" elem szélessége relatív pozícionálással (relatív) rendelkezik, használhatjuk az abszolút pozícionálást az elemek elrendezésére. Tartalomhoz (#content) az automatikus túlcsordulás (túlcsordulás: automatikus) attribútumát használtuk, így a görgetés akkor jelenik meg, ha az elem tartalma nem illeszkedik hozzá. Az Internet Explorer nem fogadja el a túlcsordulás attribútumát: az automatikus, amíg nem adjuk meg a magasságot (nem csak az alsó és a csúcspozíciót, és nem a százalékos arányt), ezért szükség szerint végezzük el.
Az utolsó dolog, amit meg kell tennünk, hogy adjunk hozzá néhány stílust, hogy az oldalunk kissé szebbé váljon. Kezdjük a menüvel.
Ha módosítja a rendszeres listát a menüben, először törölje le a pontjeleket a lista-stílus: none attribútum segítségével, és távolítsa el a cellák összes behúzását és kitöltését. Ha szeretné használni a behúzást a menüben vagy egy cella további kitöltését, győződjön meg róla, hogy pontosan megadta, amire szüksége van. Ne hagyja ezt alapértelmezett böngészőnek, mert a különböző böngészők értékei egymástól eltérhetnek.
A következő dolog, amelyet nem szabad figyelmen kívül hagyni, a linkkijelzés blokk elemként való feltüntetése. Tehát teljesen elfoglalják az egész sort, és sokkal több ellenőrzést adnak neked. Ha szeretné, hogy a menüje vízszintes legyen, akkor legjobb lenne lebegni.
És az utolsó lépés néhány kiegészítést tesz majd a CCS-hez, hogy oldalunk kellemesebb legyen.
Egy kis figyelmeztetés a központosított tartalom lekerekített sarkára. A CSS3-nak rendelkeznie kell a "határ-sugarú" attribútummal, amellyel megadhatja a sarkok kerekítésének sugarait. Ez nem fog megvalósulni a fő böngészőkben, amíg nem használod a -moz vagy -webkit előtagot (Mozilla Firefox vagy Safari / Webkit)
Hasznos megjegyzések
Amint azt talán kitaláltad, az Internet Explorer az egyetlen böngésző, amely különböző problémákkal küzd:
* A lebegő elemet meg kell adni a szélességnek, vagy semmit sem fog elérni a böngésző bármely verziójában.
* A böngésző 6. verziója túl sok szabad helyet hagy a menüünkön, ami torzítja.