fit na stránke je často nutné, aby zarovnanie centrum CSS-cesta: 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žívať žiadne kodér.
zarovnať text na stred
často k dekoračným účelom chcete nastaviť zarovnanie textu strediska, CSS v tomto prípade skracuje dobu uloženia.Predtým to bolo vykonané pomocou HTML atribútov, teraz štandard vyžaduje zarovnaním textu pomocou štýlov.Na rozdiel od bloku, pre ktoré chcete zmeniť vonkajšie okraje, s CSS zarovnanie textu v stredu sa vykonáva pomocou jedného riadku:
- text-align: center;
Táto vlastnosť sa dedia a prešiel z rodičov na všetky deti.To ovplyvňuje nielen text, ale aj na ďalších prvkov.Ak chcete urobiť, musí byť malými písmen (napríklad, rozpätie), alebo line-blok (všetky bloky, ktoré nastavuje displej vlastnosť: blok).Druhá možnosť tiež umožňuje meniť šírku a výšku viac flexibilné konfiguráciu zárezu.
Často zarovnanie stránok atribút tagu sám.To okamžite robí kód neplatný ako W3C uznal align atribút zastaraný.Jeho použitie sa neodporúča na stránke.
zarovnanie bloku v stredu
Ak chcete určiť zarovnanie stredu div, CSS môže ponúknuť pomerne jednoduchý spôsob, ako: využitie externých odsadenie okraja.Vypchávka môže byť nastavený ako prvky úrovni bloku a line-blok.Svoysva hodnota by mala byť nastavená na 0 (odsadené vertikálne) a Auto (automatické horizontálne odsadenie):
- margin: 0 auto;
Práve táto možnosť je považovaná za úplne platný.Použitie externého polstrovanie taktiež umožňuje určiť zarovnanie centra: CSS-margin vlastnosť nám umožňuje vyriešiť veľa problémov spojených s polohovacím prvku na stránke.
Align blok na ľavom alebo pravom okraji
Niekedy zarovnanie stred CSS-way nie je nutné, ale je potrebné dať dve jednotky vedľa jedného z ľavej strany a druhý - z pravej strany.Pre túto vlastnosť je plavák, ktorý môže mať jednu z troch hodnôt: vľavo, vpravo, alebo žiadny.Povedzme, že máte dve jednotky, ktoré je potrebné dať dohromady.Potom kód bude:
- .left {float: left;}
- .right {float: right}
Ak je tretia jednotka, ktorá musí byť umiestnená v rámci prvých dvoch blokoch (napr päta), onmusíte zaregistrovať vlastnosť jasný:
- .left {float: left;}
- .right {float: right}
- footer {jasne: obaja}
skutočnosť, že bloky s ľavým tried a pravej páde z celkovéhoprietok, to znamená, že všetky ostatné prvky ignorovala samotnú existenciu prvkov zarovnaných.Vlastnosť jasne: obaja umožňuje päty alebo akúkoľvek inú jednotku vidieť, poklesol z prvkov prietoku a zakazuje zábal (float) na oboch doľava a doprava.Preto v našom príklade, päty posunie dole.
Zvislé zarovnanie
Existujú prípady, keď zarovnanie nedostatočná set centrum CSS-spôsoby, musíte zmeniť aj zvislej polohy dieťaťa bloku.Akékoľvek line alebo line-blok prvok môže byť tlačený proti hornej alebo dolnej okraj, ktorý sa nachádza v strede rodičovského elementu, alebo môže byť v akomkoľvek mieste.Viac často vyžadujú zarovnanie poľa v centre mesta, tento atribút sa používa vertikálne zarovnanie.Predpokladajme, že existujú dve jednotky, jeden vnútri druhého.Vnútorná jednotka - line-block element (display: inline-block).Je nevyhnutné zosúladiť jednotky vertikálne dieťa: zarovnanie
- na hornej hranici - .child {vertikálne-align: top};
- centrum zarovnanie - .child {vertikálne-align: middle};
- vyrovnanie na dolnom konci - .child {vertikálne-align: dolná};
na prvky úrovni bloku alebo text-align, alebo vertikálne zarovnanie nepoužijú.
Možné problémy s zarovnaný jednotiek
Niekedy div zarovnajte stred CSS-spôsobom môže spôsobiť drobné problémy.Napríklad pomocou plaváka: napríklad, tam sú tri bloky: .first, .second a .third.Druhý a tretí bloky sú v prvom.Prvok s triedou druhého ľavého zarovnaný, a posledným bloku - na pravej strane.Po vyrovnaní dva spadol z potoka.Ak je rodičom nie je definovaná výšky (napr, 30em), nebude už natiahnuť výšku pomocných jednotiek.Ak sa chcete vyhnúť tejto chybe, použite "spacer" - špeciálnu jednotku, ktorá vidí .second a .third.CSS-kód:
- .second {float: left}
- .third {float: right}
- .clearfix {výška: 0;clear: both;}
často používa pseudo: po, ktorý tiež umožňuje vrátiť sa do blokov na miesto tým, že vytvorí psevdorasporki (v tomto príklade v div s triedou kontajnera leží vnútri .first a obsahuje .left a .right):
- .doľava {float: left}
- .right {float: right}
- .container: za {obsah: '';display: table;clear: both;}
nad možnosťami - najbežnejš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 sa často stretávali layout - zarovnanie line-blokových prvkov.Po každom z nich sa automaticky pridaného priestoru.Sa vyrovnať s touto vlastnosťou nápovedy okraja, ktorý je definovaný negatívny odsadenie.Existujú aj ďalšie metódy, ktoré sa používajú menej často, napríklad, resetovanie veľkosť písma.V tomto prípade, vlastnosti materskej predpísané Veľkosť písma: 0.Ak sa nachádza v bloky textu, vlastnosti line-blokových prvkov sa vrátili na požadovanú veľkosť.Napríklad, font-size: 1em.Táto metóda nie je vždy pohodlné, možnosť s externými marže tak oveľa častejšie používajú.
zarovnanie bloku umožňuje vytvárať krásne a funkčné rozloženie stránky, a to je celkové usporiadanie a umiestnenie tovaru v obchodoch, a fotky na malom internetových stránkach.
