Zarovnání středu: rozložení CSS

Když je rozvržení stránky hotovo, je často nutné střed do středu metodou CSS: například centrovat hlavní jednotku. Existuje několik způsobů, jak vyřešit tento problém, každý z nich dříve nebo později musí být používán jakýmkoli návrhářem rozvržení.

Zarovnejte text na střed

Často pro dekorativní účely musíte nastavit zarovnání textu na střed, CSS v tomto případě vám umožní zkrátit čas rozvržení. Dříve to bylo provedeno pomocí atributů HTML, ale standard nyní vyžaduje zarovnání textu pomocí listů stylů. Na rozdíl od bloků, pro které chcete změnit vnější zarážky, v CSS je text centrován na střed pomocí jednoho řádku:

• text-align: center;

Tato vlastnost je zděděna a předávána od rodiče všem dětem. Ovlivňuje nejen text, ale i další prvky. K tomu musí být malá (například span) nebo line-block (libovolné bloky, na které je nastavena vlastnost display: block). Druhá možnost také umožňuje měnit šířku a výšku prvku, je flexibilnější, aby se upravily zarážky.

Často jsou na stránkách zarovnány přiřazeny samotné značce. To okamžitě činí kód neplatný, protože W3C rozpoznal atribut zarovnání jako zastaralý. Použití na stránce se nedoporučuje.

Zarovnejte blok do středu

Pokud chcete nastavit zarovnání divu na střed, CSS může nabídnout poměrně pohodlný způsob: pomocí okrajů vnějších okrajů. Odsazení mohou být přiřazeny k blokovacím prvkům i k jednotlivým blokům. Hodnota vlastností musí být 0 (vertikální) a auto (horizontální odsazení):

• margin: 0 auto;

Nyní je tato možnost považována za zcela platnou. Použití externích odsazení také umožňuje nastavit zarovnání obrázku uprostřed: Okraj vlastností CSS umožňuje vyřešit mnoho problémů spojených s umístěním položky na stránce.

Zarovnejte blok na levý nebo pravý okraj

Někdy je nemusíte zarovnávat do středu metodou CSS, ale musíte dát dva bloky vedle sebe: jeden z levého okraje a druhý od pravého. K tomu je vlastnost float, která může mít jednu ze tří hodnot: levou, pravou nebo žádnou. Řekněme, že máte dva bloky, které je třeba umístit vedle sebe. Kód bude následovně:

• .vlevo {float: left}
• .doprava {float: right}

Pokud existuje i třetí blok, který by měl být umístěn pod prvními dvěma bloky (například zápatí), pak musí být nastavena vlastnost vymazat:

• .vlevo {float: left}
• .doprava {float: right}
• zápatí {clear: both}

Záležitost spočívá v tom, že bloky s třídami vlevo a vpravo vypadají z obecného toku, to znamená, že všechny ostatní prvky ignorují existenci zarovnaných prvků. Jasné: obě vlastnosti umožňují zápatí nebo jakýkoli jiný blok, aby viděli prvky upuštěné z proudu a zabraňují tomu, aby plavák ležel i vpravo. Proto v našem příkladu se zápatí posouvá směrem dolů.

Svislé zarovnání

Existují chvíle, kdy nestačí nastavit zarovnání středu v metodách CSS, ale stále musíte změnit vertikální polohu podřízeného bloku. Jakýkoli prvek čáry nebo čárového bloku může být stisknut na horní nebo dolní okraj, aby byl uprostřed rodičovského prvku nebo aby byl na libovolném místě. Nejčastěji je třeba zarovnat blok do středu pomocí atributu vertikální zarovnání. Předpokládejme, že existují dva bloky, jeden je vnořený v druhém. Vnitřní blok je čárový prvek (displej: inline-block). Blok dítěte musíte zarovnat vertikálně:

• zarovnání na horním okraji - .child {vertical-align: top};
• zarovnání středu - .křídlo {vertikálně-zarovnání: uprostřed};
• zarovnání na dolním okraji - .child {vertical-align: bottom};

Blokovat prvky ani text-zarovnání, nebo svislé zarovnání funkce.

Možné problémy s zarovnanými bloky

Někdy může zarovnání div kolem centra pomocí metody CSS způsobit menší problémy. Například při použití float: existují například tři bloky: .first, .cond, and third. Druhý a třetí blok leží v první. Prvek s druhou třídou je opuštěn vlevo a poslední blok je zarovnán vpravo. Po vyrovnání oba vypadli z proudu. Pokud nadřazený nemá výšku (například 30m), nebude se dále roztahovat podél výšky podřízených bloků. Chcete-li se vyhnout této chybě, použijte "spacer" - speciální blok, který vidí. Second a .third. CSS kód:

• .druhý {float: left}
• .třetí {float: right}
• .clearfix {height: 0- clear: both-}

pseudo často používá: po, což také umožňuje vrátit bloky na místě tím, že vytvoří psevdorasporki (v příkladu na div s třídou leží uvnitř kontejneru a zahrnuje .first .left a .right):

• .vlevo {float: left}
• .doprava {float: right}
• .kontejner: po {content: `` - na displeji: tabulka-clear: both-}

Výše uvedené možnosti jsou nejběžnější, ačkoli existuje několik variant. Nejjednodušší a nejpohodlnější způsob, jak vytvořit experimenty pomocí pseudo-rozptylu, můžete vždy najít.

Dalším problémem, s nímž se často setkávají návrháři rozvržení, je zarovnání prvků řádkové schránky. Po každém z nich je automaticky přidán prostor. Vlastnost okrajů, která je určena záporným odsazením, pomáhá s tím vyrovnat. Existují i ​​jiné metody, které se používají mnohem méně často: například nulování velikost písma. V tomto případě je velikost písma: 0 nastavena ve vlastnostech nadřazeného prvku. Pokud je uvnitř bloků text, potom se ve vlastnostech elementů blokového řádku vrátí požadovaná velikost písma. Například velikost písma: 1em. Metoda není vždy vhodná, takže verze s vnějšími prohlubněmi je mnohem častěji používána.

Zarovnání bloků umožňuje vytvářet krásné a funkční stránky: toto je rozvržení celkového rozvržení a umístění zboží v online obchodech a fotografie na webu vizitky.