fér el az oldalon gyakran szükséges ahhoz, hogy a középre igazítást CSS-módon: például a központtól főegység.Számos megoldás erre a problémára, amelyek mindegyike előbb vagy utóbb meg kell használni bármilyen coder.
szöveget igazítani központú
gyakran dekorációs célokra szeretné igazítottam a szöveget a központ, CSS ebben az esetben, lerövidíti a bevezetését.Korábban ez alapján került sor HTML-attribútumok, most szabvány előírja, összehangolása szöveget stíluslapoknak.Ezzel szemben a blokk, amelynek meg szeretné változtatni a külső margók, a CSS szövegigazítást közepén készül egy sorban:
- text-align: center;
Ez a tulajdonság öröklődik, és átment a szülő minden gyermek.Ez érinti nem csak a szöveg, hanem más elemek.Ehhez kell lenniük kisbetűvel (például span) vagy vonal blokk (minden blokk, amely meghatározza az ingatlan display: block).Az utóbbi opció lehetővé teszi, hogy módosítsa a szélessége és magassága rugalmasabb konfiguráció a behúzás.
Gyakran a lapok csatlakoznak attribútumot a tag maga.Ez azonnal teszi a kód érvénytelen, mert a W3C elismerte align attribútum elavult.Használata nem ajánlott az oldalon.
beállítóék középpontjában
Ha meg szeretné határozni a nyomvonal a központja a div, CSS tud nyújtani egy viszonylag egyszerű módja: külső behúzás árrés.Padding lehet beállítani, mint egy blokk szintű elemek és a line-blokk.Svoysva kell beállítani, hogy 0 (tagolt függőleges) és automatikus (automatikus vízszintes francia):
- margin: 0 auto;
Most ez a lehetőség elismert feltétlenül érvényes.A külső padding is lehetővé teszi, hogy meghatározza a nyomvonal a központtól: CSS-margin tulajdonság lehetővé teszi számunkra, hogy megoldja számos megoldandó feladat a pozicionálóelem az oldalon.
igazítás blokk a jobb vagy bal szélén
Néha a középre igazítást CSS-módon nem szükséges, de szükséges, hogy két egység mellett az egyik a bal oldalon, a másik - a jobb.Erről az ingatlanról van egy úszó, amely akár egy három érték: balra, jobbra, vagy sem.Tegyük fel, hogy van két egység, amelyeket meg kell összerakni.Ezután a kód lesz:
- .left {float: left;}
- .right {float: right}
Ha van egy harmadik egység, amelynek alá kell helyezni az első két blokk (pl lábléc), akiregisztrálnia kell az ingatlan világos:
- .left {float: left;}
- .right {float: right}
- footer {clear: both}
tény, hogy a blokkokat az osztályok balra és jobbra esik ki az összesflow, azaz az összes többi elemet figyelmen kívül hagyja a létét az elemek vannak.Az ingatlan világos: mind lehetővé teszi a lábléc vagy bármely más egységet látni csökkent a flow elemek és tiltja pakolás (float) mind a bal és a jobb.Ezért a példánkban, a lábléc tolódik le.
Függőleges igazítás
Vannak esetek, amikor nem elegendő készletet középre igazítást CSS-módon, meg kell még változtatni a függőleges helyzetben a gyermek blokk.Bármilyen vagy a gyártósor-blokk elem nyomni a felső vagy alsó szélére, közepén helyezkedik el a szülő elem, vagy legyen bárhol.Gyakrabban be kell hangolni a doboz a központtól, a attribútumot használják vertical-align.Tegyük fel, hogy van két egységből, egy belül egy másik.A belső egység - line-blokk elem (display: inline-block).Meg kell hangolni a készüléket függőlegesen gyermek:
- igazítás a felső határ - .child {vertical-align: top};
- középre igazítást - .child {vertical-align: középen};
- összehangolás alsó végén - .child {vertical-align: alsó};
a blokk szintű elemek vagy text-align, vagy vertical-align nem vonatkozik.
Lehetséges problémák egymáshoz igazodó egységek
Néha div align közepén a CSS-utas okozhat kisebb problémákat.Például, ha a float: például, van három blokk: .first, .second és .third.A második és a harmadik blokk van az első.Ha egy elem egy osztály a második balra igazított, és az utolsó blokk - a jobb oldalon.Belövése után a két kiesett a patak.Ha a szülő nem meghatározott magasságú (pl 30em), akkor már nem nyúlik a magassága leányvállalata egységek.A hiba elkerülése érdekében, használja a "távtartó" - egy különleges egységet, amely úgy látja, .second és .third.CSS-kód:
- .second {float: left}
- .third {float: right}
- .clearfix {magasság: 0;egyértelmű: mindkét;}
gyakran ál: miután, amely lehetővé teszi azt is, hogy visszatérjen a blokkok helyére létrehozásával psevdorasporki (ebben a példában egy div egy osztály a konténer sávon belül .first és tartalmaz .left és .right):
- .balra {float: left}
- .right {float: right}
- .container: miután {tartalom: '';display: table;egyértelmű: mindkét;}
fenti lehetőségek - a leggyakoribb, bár vannak eltérések.Mindig lehet találni a legegyszerűbb és legkényelmesebb módja annak, hogy hozzon létre psevdorasporki kísérletekkel.
Egy másik probléma elrendezése - összehangolása vonal-blokkot tartalmaz.Miután mindegyik automatikusan hozzáadódik helyet.Ahhoz, hogy megbirkózzon az ingatlan segítséget árrés, ami által meghatározott negatív behúzás.Vannak más módszerek is, hogy ritkábban használtak, például alaphelyzetbe a betűméretet.Ebben az esetben, a tulajdonságok a szülő előírt font-méret: 0.Ha található szövegtömböt, tulajdonságainak vonal-blokk elemek visszatértek a kívánt méretet.Például, font-size: 1em.A módszer nem mindig kényelmes, így sokkal gyakrabban használják az opció külső peremére.
beállítóék lehetővé teszi, hogy szép és funkcionális oldal elrendezését, és ez az általános elrendezését és elhelyezkedését áru a boltokban, és a fényképek egy kis weboldal.
