Középre: CSS-elrendezés

Ha az elrendezés a lap gyakran szükséges, hogy egy középre CSS-módon: például a központtól a fő egységet. Számos megoldás erre a problémára, amelyek mindegyike előbb vagy utóbb el kell használni minden coder.

Szöveg igazítása a központtól

Gyakran dekorációs célokra szeretné beállítani a szöveget középre, CSS ebben az esetben, hogy csökkentse az idő bevezetését. Korábban ez történt a HTML-attribútumokat, de most a megkívánt, hogy összehangolja a szöveget a stíluslapot. Ezzel szemben a blokk, amelynek meg szeretné változtatni a külső padding CSS összehangolása szöveg közepén készül egy sorban:

• text-align: center;

Ez a tulajdonság az örökölt és a szülő átadja minden gyermek számára. Ez nemcsak a szöveget, hanem más elemekkel. Erre a célra, akkor meg kell kisbetűs (pl span), vagy sorban blokk (blokkokra, amelyek meghatározzák display tulajdonság: block). Az utóbbi lehetőség azt is lehetővé teszi, hogy módosítsa a szélessége és magassága az elem, rugalmasabb konfiguráció a behúzás.

oldalak gyakran csatlakoznak attribútumot magát a címkét. Ez azonnal teszi a kód érvénytelen, mivel a W3C elismert align tulajdonság elavult. Ezt használva egy oldalon nem ajánlott.

középre blokk

Ha szeretné beállítani a nyomvonal a div a közepén, CSS-hez elég kényelmes módja: a külső padding árrés. Padding megadható a blokk elemek, és a vonal-blokk. Svoysva érték legyen 0 (függőleges padding), és az automatikus (automatikus behúzás vízszintesen):

• margin: 0 auto;

Most ez a lehetőség elismert feltétlenül érvényes. A külső padding is lehetővé teszi, hogy a nyomvonal a központtól: CSS-margin tulajdonság lehetővé teszi számunkra, hogy megoldja sok probléma kapcsolódó pozicionáló elem az oldalon.

Összehangolása a bal vagy jobb szélén, a blokk

Néha CSS-utas nem igényel összehangolása a központtól, de szükséges, hogy a következő két részben, az egyik a bal oldalon, a másik - a jobb. Erre ott van a float tulajdonság, amely akár három érték egyikét: balra, jobbra, vagy sem. Tegyük fel, hogy van két blokkot kell egymás mellé. Ezután a kód a következő:

• .left {float: left;}
• .right {float: right}

Ha van egy harmadik blokk, ami kell elhelyezni az első két blokk (például lábléc), akkor regisztrálni kell egyértelmű jellemzője:

• .left {float: left;}
• .right {float: right}
• Lábjegyzet {egyértelmű: mind}

Az a tény, hogy a blokkokat osztályainak balra és jobbra esik ki a teljes áramlás, hogy van, az összes többi elemet figyelmen kívül hagyta a létét elemek vannak. Az ingatlan világos: mind lehetővé Lábjegyzet blokk vagy más látható kiválik az áramlási sejtek és megtiltja pakolás (float) mind a bal és a jobb. Ezért a mi példánkban a lábléc elmozdul lefelé.

függőleges igazítás

Vannak esetek, amikor nem elég ahhoz, hogy a nyomvonal a központja a CSS-módon, akkor is meg kell változtatni a függőleges helyzetben a gyermek blokk. Bármely vonal vagy sor-blokk elem nekinyomódik a felső vagy az alsó szélén, közepén helyezkedik el a szülő elem, vagy lehet egy önkényes elhelyezkedésben. Leggyakrabban be kell hangolni a központja a blokk, akkor használja vertical-align tulajdonság. Tegyük fel, hogy van két blokk, egy ágyazva a másik. Ebben a beltéri egység - sor-blokk elem (display: inline-block). Meg kell igazítani a függőleges blokk gyermek:

• összehangolás a felső határ - .child {függőleges-align: top};
• központú - .child {függőleges-align: középen};
• összehangolása az alsó széle - .child {függőleges-align: alsó};

Blokknál elemek audio text-align vagy vertical-align nem alkalmazható.

Lehetséges problémák igazított egységek

Néha div align közepén a CSS-utas okozhat egy kis baj. Például akkor, ha a float: például, három blokk: .first, .second és .third. A második és a harmadik blokk hazugság az első. Egy elem egy osztály második balra igazított, és az utolsó mondat - a jobb oldalon. Belövése után a két leesett a falról. Ha a szülő elem nem meghatározott magasságú (pl 30em), akkor megszűnik nyúlik magassága leányvállalat egység. A hiba elkerülése érdekében, használja a „spacer” - 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;}

pszeudo gyakran használják: után, ami szintén lehetővé teszi, hogy visszatérjen a blokkok helyére létrehozásával psevdorasporki (a példában a div class fekszik a tartály belsejében, és tartalmaz egy .first .left és .right):

• .left {float: bal}
• .right {float: right}
• .container: miután {tartalom: ''; display: table; egyértelmű: mindkét;}

A fenti lehetőségek - a leggyakoribb, bár vannak eltérések. Mindig lehet találni a legegyszerűbb és legkényelmesebb módja a psevdorasporki kísérletekkel.

Egy másik probléma elrendezése - összehangolása vonal blokkot tartalmaz. Miután mindegyik tér automatikusan hozzáadja. Kezelje segít az árrés tulajdonság, ami által meghatározott negatív behúzás. Vannak más módon, amelyeket ritkábban, például törölhetjük a betűméretet. Ebben az esetben, a tulajdonságok a szülő elem regisztrálja font-méret: 0. Ha található szövegtömböt, tulajdonságainak vonal tömb elemei visszatértek a kívánt betűméretet. Például font-size: 1em. A módszer nem mindig kényelmes, ezért sokkal gyakrabban használják változat külső margó.

Igazítása Blocks lehetővé teszi, hogy szép és funkcionális oldalak: általános elrendezése és kialakítása, és a helyét áru a boltokban, és a fotókat a helyén egy kicsi.