Sústredený: CSS-layout

Ak je rozloženie stránky je často nutné vykonať centrovaný CSS-way: napríklad do centra hlavnú jednotku. Existuje niekoľko riešení tohto problému, z ktorých každá bude skôr či neskôr musieť použiť akýkoľvek kodér.

Zarovnanie textu na stred

Často k dekoračným účelom Na nastavenie text na stred, CSS v tomto prípade, znížiť dobu uloženia. Predtým to bolo vykonané pomocou HTML atribúty, ale teraz štandard požaduje, aby zarovnanie textu pomocou štýlov. Na rozdiel od bloku, pre ktorý chcete zmeniť vonkajšiu výplň zladenosti CSS textu v strede je vytvorený s jedinou riadku:

• text-align: centrum;

Táto vlastnosť sa dedia a prešiel z rodičov na všetky deti. To ovplyvňuje nielen text, ale tiež na iné prvky. Na tento účel by mali byť malými písmenami (napr span), alebo radový blok (nejaké bloky, ktoré určujú vlastnosti display: block). Druhá možnosť tiež umožňuje meniť šírku a výšku elementu, flexibilnejšie usporiadanie zárezu.

Stránky často zarovnať atribút pre seba značku. To okamžite robí kód neplatný, pretože W3C uznal align atribút zastarané. Jeho použitie na strane sa neodporúča.

sústredený blok

Pokiaľ chcete nastaviť zarovnania div v stredu, CSS môže ponúknuť pomerne pohodlný spôsob: využitie externých čalúnenie marže. Výplň môže byť špecifikované ako blokových prvkov, a línie bloku. Svoysva hodnota by mala byť 0 (vertikálny padding), a auto (automatické odsadzovanie horizontálne):

• margin: 0 auto;

Práve táto možnosť je považovaná za absolútne platný. Používate externý polstrovanie taktiež umožňuje nastaviť zarovnanie centra: vlastnosť CSS-margin nám umožňuje riešiť mnoho problémov spojených s polohovacím prvku na stránke.

Vyrovnanie ľavého a pravého okraja bloku

Niekedy CSS-way nevyžaduje zarovnanie stredu, ale je nutné dať ďalšie dva bloky, jeden z ľavej strany a druhý - z pravej strany. K tomu je tu float vlastnosť, ktorá môže mať jednu z troch hodnôt: vľavo, vpravo, alebo žiadny. Povedzme, že máte dva bloky, ktoré by mali byť umiestnené vedľa seba. Potom kód je nasledujúci:

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

Ak je tretí blok, ktorý sa musí nachádzať v rámci prvých dvoch blokov (napr., Päta), potom je treba registrovať jasné funkcie:

• .left {float: left;}
• .right {float: vpravo}
• zápätie {jasné: obe}

Skutočnosť, že bloky s tried ľavú a pravú vypadnúť z celkového toku, to znamená, že všetky ostatné prvky ignorované samotnú existenciu prvkov usporiadaných. Vlastnosť jasné: obe umožňuje zápätie blok alebo akékoľvek iné viditeľné vyzrážaného z prietokových buniek a zakazuje obal (float) ako na ľavej a pravej strane. Preto je v našom príklade, päty je posunutý smerom nadol.

zvislé zarovnanie

Existujú prípady, keď nestačí nastaviť zarovnanie stredu CSS-spôsoby, musíte tiež zmeniť vertikálnu pozíciu detského bloku. Každý riadok alebo riadok blok prvok môže byť tlačené proti hornej alebo dolnej okraj, ktorý sa nachádza v strede rodičovského prvku alebo môže byť v ľubovoľnom mieste. Najčastejšie vyžadujú zarovnanie stredu bloku, používa atribút vertical-align. Predpokladajme, že existujú dva bloky, jeden vnorené vo vnútri druhého. V tejto vnútornej jednotky - riadok blok prvku (display: inline-blok). Je nutné zladiť zvislého bloku dieťa:

• vyrovnanie horný okraj - .child {vertikálne zarovnanie: top};
• stred - .child {vertikálne zarovnanie: stredná};
• zarovnanie spodnej hrany - .child {vertikálne zarovnanie: spodný};

Na blokových prvkov neplatí audio text-align alebo vertical-align.

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

Niekedy div zladiť stred CSS-spôsobom môže spôsobiť menšie ťažkosti. Napríklad pri použití plaváka: napríklad, tam sú tri bloky: .first, .second a .third. Druhý a tretí bloky leží v prvej. Prvok s triedou druhou zarovnaný doľava a posledný blok - na pravej strane. Po vyrovnaní dva klesla z potoka. Ak je rodič prvok nie je definovaná výškou (napr 30em), to prestane pretiahnuť výšku podporných jednotiek. Ak sa chcete vyhnúť tejto chybe, použite "vložku" - špeciálnu jednotku, ktorá vidí .second a .third. CSS kód:

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

pseudo často používa: po, čo tiež umožňuje vrátiť bloky na mieste tým, že vytvorí psevdorasporki (v príklade na div s triedou leží vo vnútri kontajnera a zahŕňa .first .left a .right):

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

Vyššie uvedené možnosti - najčastejšie, aj keď existujú určité rozdiely. Môžete vždy nájsť najjednoduchší a najpohodlnejší spôsob, ako vytvoriť psevdorasporki experimenty.

Ďalším problémom často sa vyskytujúcim usporiadanie - zarovnanie line-blokových prvkov. Potom, čo každý z nich je priestor automaticky pridané. Rukoväť pomáha vlastnosť okrajov, ktorý je definovaný negatívnym odsadenie. Existujú aj iné spôsoby, ktoré sa používajú menej často, napríklad obnoviť veľkosť písma. V tomto prípade sú vlastnosti materskej prvku registruje Veľkosť písma: 0. Ak sa nachádza vo vnútri jednotlivých blokov textu, vlastnosti line-blokových prvkov sa vrátili na požadovanú veľkosť písma. Napríklad, font-size: 1em. Táto metóda nie je vždy pohodlné, takže je oveľa viac bežne používané verzii s vonkajším okrajom.

Vyrovnanie blokov umožňuje vytvoriť krásne a funkčné stránky: celkový vzhľad a rozloženie a umiestnenie tovaru v obchodoch a fotky na mieste malý.