6 módjai központosító elemek CSS eszközökkel
Az általános kiigazítás HTML elemek az oldalon - ez nem bonyolult. Egyes esetekben. A webfejlesztők kell rack az agyukat, hogy megtalálják a legjobb megoldást.
Központosító elemek vízszintesen nem annyira bonyolult, függőleges kérdéseket vetett fel, jól ötvözi általános tud egy holtpont. A korszak adaptív kialakítású, csak ritkán igazán világos méretei bizonyos elemeit. Számoltam 6 különböző módjait központosító elemek CSS. Kezdjük egy egyszerű példát, kifinomultabb kivitelben. Fog működni ugyanazt a HTML kódot:
Vízszintbeállítás a text-align
Néha a legegyszerűbb megoldás a legjobb:
Nincsenek függőleges igazítás: erre akkor kell hozzá egy div-margin-top és margin-bottom tulajdonság.
Központosítás használatával margin: auto
Egy másik megoldás a vízszintes igazítás:
Megjegyzendő, hogy ez a módszer, akkor be kell állítani a tulajdonság display: block.
Központosító táblázat használatával-sejt
A display: table-cell, biztosítani tudjuk a központosító elem mind függőlegesen, mind vízszintesen. De akkor meg kell, hogy többet fektessenek a kép egyik eleme div.
Hogy minden működik rendesen, a div-ben be kell állítani a szélességét: 100%. A vonalba állító rúddal függőlegesen használni standard technikák, kitett magassága. Úgy működik, mindenhol, így IE8 +.
abszolút igazítás
Nagyon érdekes megoldás. Azt, hogy meg kell állítani a magasságát a külső tartály:
Középre őket használó lefordítani
Az új megoldás, mely CSS átalakulás. Ez biztosítja mind vízszintes igazítás és függőleges:
Van néhány hátránya:
- CSS átalakítás tulajdonság használatát igényli böngésző előtagokat
- Nem működik a régebbi változatát IE (8 vagy kevesebb)
- A külső tartály kell határozni a magasságot.
- Ha a tartály belseje van egy szöveg, ez lehet egy kicsit homályos.
Alignment segítségével a kijelző formában Flex
Talán a legegyszerűbb megoldás.
Ez nem működik minden változatát IE (bár lehet, hogy biztosítsák magukat segítségével ráadásul display: table-cell). Teljes CSS:
Központosítás alkalmazásával számított
Egyes esetekben ez a módszer sokkal rugalmasabb, mint használ flexbox:
Ez nagyon egyszerű, ki tudjuk számítani a szükséges méretet, attól függően, hogy az elrendezés az egész oldalt. A számítások nagyon egyszerű, 50% a központi pont a tartály, de a mi feladatunk el, hogy ezeket a bal felső sarokban koordináták a kép. Ezután fogja a fele a magassága és szélessége a képet. A képlet a következő:
A gyakorlatban előfordulhat, hogy ez a módszer jól működik, ha tudjuk, hogy a méretei elemek:
Ez a módszer támogatja a Firefox-om, kezdve 4-es verzió, akkor regisztrálnia kell a böngésző előtagokat. Az IE 8 nem működik. A teljes kód:
Remélhetőleg ezek a módszerek lesz elég ahhoz, hogy találtam egy jobb megoldást.
5 óra utolsó oszlopában „CSS”
Csekély hatása interaktív animációs karakter.
Kis fogalma szórakoztató tipp, hogy végrehajtsák az SVG és anime.js. Amellett, hogy a speciális stílust a példában realizált animáció és az átalakulás, a grafikus objektumok.
Kísérlet: animált SVG betűk alapján anime.js könyvtárban.
Cool weboldal megjelenítését a kísérlet, amelyben a „first-person” a napszemüveg.
A kísérleti script legördülő navigációt.
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!