Soustředěný: CSS-layout

Je-li rozložení stránky je často nutné provést centrovaný CSS-way: například do centra hlavní jednotku. Existuje několik řešení tohoto problému, z nichž každá bude dříve či později muset použít jakýkoli kodér.

Zarovnání textu na střed

Často k dekoračním účelům Chcete-li nastavit text na střed, CSS v tomto případě, snížit dobu uložení. Dříve to bylo provedeno pomocí HTML atributy, ale nyní standard požaduje, aby zarovnání textu pomocí stylů. Na rozdíl od bloku, pro který chcete změnit vnější výplň sladěnosti CSS textu ve středu je vytvořen s jedinou řádku:

• text-align: centrum;

Tato vlastnost se dědí a prošel z rodičů na všechny děti. To ovlivňuje nejen text, ale také na jiné prvky. Za tímto účelem by měly být malými písmeny (např span), nebo řadový blok (nějaké bloky, které určují vlastnosti display: block). Druhá možnost také umožňuje měnit šířku a výšku elementu, flexibilnější uspořádání zářezu.

Stránky často zarovnat atribut pro sebe značku. To okamžitě dělá kód neplatný, protože W3C uznal align atribut zastaralé. Jeho použití na straně se nedoporučuje.

soustředěný blok

Pokud chcete nastavit zarovnání div ve středu, CSS může nabídnout poměrně pohodlný způsob: využití externích čalounění marže. Výplň může být specifikováno jako blokových prvků, a linie bloku. Svoysva hodnota by měla být 0 (vertikální padding), a auto (automatické odsazování horizontálně):

• margin: 0 auto;

Právě tato možnost je považována za absolutně platný. Používáte externí polstrování také umožňuje nastavit zarovnání centra: vlastnost CSS-margin nám umožňuje řešit mnoho problémů spojených s polohovacím prvku na stránce.

Vyrovnání levého a pravého okraje bloku

Někdy CSS-way nevyžaduje zarovnání středu, ale je nutné dát další dva bloky, jeden z levé strany a druhý - z pravé strany. K tomu je zde float vlastnost, která může mít jednu ze tří hodnot: vlevo, vpravo, nebo žádný. Řekněme, že máte dva bloky, které by měly být umístěny vedle sebe. Pak kód je následující:

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

Je-li třetí blok, který se musí nacházet v rámci prvních dvou bloků (např., Zápatí), pak je třeba registrovat jasné funkce:

• .left {float: left;}
• .right {float: vpravo}
• zápatí {jasné: obě}

Skutečnost, že bloky s tříd levou a pravou vypadnout z celkového toku, to znamená, že všechny ostatní prvky ignorovány samotnou existenci prvků uspořádaných. Vlastnost jasné: obě umožňuje zápatí blok nebo jakékoliv jiné viditelné vysráženého z průtokových buněk a zakazuje obal (float) jak na levé a pravé straně. Proto je v našem příkladu, zápatí je posunut směrem dolů.

svislé zarovnání

Existují případy, kdy nestačí nastavit zarovnání středu CSS-způsoby, musíte také změnit vertikální pozici dětského bloku. Každý řádek nebo řádek blok prvek může být tlačena proti horní nebo dolní okraj, který se nachází ve středu rodičovského prvku nebo může být v libovolném místě. Nejčastěji vyžadují zarovnání středu bloku, používá atribut vertical-align. Předpokládejme, že existují dva bloky, jeden vnořené uvnitř druhého. V této vnitřní jednotky - řádek blok prvku (display: inline-blok). Je nutné sladit svislého bloku dítě:

• vyrovnání horní okraj - .child {vertikální zarovnání: top};
• střed - .child {vertikální zarovnání: střední};
• zarovnání spodní hrany - .child {vertikální zarovnání: spodní};

Na blokových prvků neplatí audio text-align nebo vertical-align.

Možné problémy s vyrovnanými jednotkami

Někdy div sladit střed CSS-způsobem může způsobit menší potíže. Například při použití plováku: například, tam jsou tři bloky: .first, .second a .third. Druhý a třetí bloky leží v první. Prvek s třídou druhou zarovnán doleva a poslední blok - na pravé straně. Po vyrovnání dva klesla z potoka. Je-li rodič prvek není definována výškou (např 30em), to přestane protáhnout výšku podpůrných jednotek. Chcete-li se vyhnout této chybě, použijte „vložku“ - speciální jednotku, která vidí .second a .third. CSS kód:

• .second {float: left}
• .third {float: vpravo}
• .clearfix {výška: 0; jasné: obě;}

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):

• .left {float: left}
• .right {float: vpravo}
• .container: po {obsah: ''; display: table; jasné: obě;}

Výše uvedené možnosti - nejčastější, i když existují určité rozdíly. Můžete vždy najít nejjednodušší a nejpohodlnější způsob, jak vytvořit psevdorasporki experimenty.

Dalším problémem často se vyskytujícím uspořádání - zarovnání line-blokových prvků. Poté, co každý z nich je prostor automaticky přidáno. Rukojeť pomáhá vlastnost okrajů, který je definován negativním odsazení. Existují i jiné způsoby, které se používají méně často, například obnovit velikost písma. V tomto případě jsou vlastnosti mateřské prvku registruje Velikost písma: 0. Pokud se nachází uvnitř jednotlivých bloků textu, vlastnosti line-blokových prvků se vrátili na požadovanou velikost písma. Například, font-size: 1em. Tato metoda není vždy pohodlné, takže je mnohem více běžně používané verzi s vnějším okrajem.

Vyrovnání bloků umožňuje vytvořit krásné a funkční stránky: celkový vzhled a rozložení a umístění zboží v obchodech a fotky na místě malý.