Pri rozvrhnutí stránky je často potrebné vykonať zarovnanie na stred spôsobom CSS: napríklad vycentrovať hlavný blok. Existuje niekoľko možností na vyriešenie tohto problému, z ktorých každý musí skôr alebo neskôr použiť akýkoľvek návrhár rozloženia.

Zarovnanie textu na stred

Často na dekoratívne účely chcete nastaviť zarovnanie textu na stred, CSS v tomto prípade umožňuje skrátiť čas rozloženia. Predtým sa to vykonávalo pomocou atribútov HTML, ale teraz štandard vyžaduje zarovnanie textu pomocou šablón štýlov. Na rozdiel od blokov, ktoré potrebujú zmeniť okraje, v CSS je zarovnanie textu vycentrované na jeden riadok:

• text-align:center;

Táto vlastnosť sa zdedí a prenáša z rodičov na všetky deti. Ovplyvňuje nielen text, ale aj iné prvky. Aby to bolo možné, musia byť vložené (napríklad span) alebo inline-block (všetky bloky, ktoré majú nastavenú vlastnosť display: block). Posledná možnosť tiež umožňuje zmeniť šírku a výšku prvku, flexibilnejšie upraviť zarážky.

Na stránkach sa zarovnanie často pripisuje samotnej značke. To okamžite robí kód neplatným, pretože W3C zastaralo atribút align. Použitie na stránke sa neodporúča.

Zarovnanie bloku na stred

Ak potrebujete vycentrovať div, CSS má celkom praktický spôsob: pomocou okrajov. Odsadenia je možné nastaviť pre blokové prvky aj pre inline-blokové prvky. Hodnota vlastnosti musí mať hodnoty 0 (vertikálne zarážky) a auto (automatické horizontálne zarážky):

• okraj:0 auto;

Teraz je táto možnosť uznaná ako absolútne platná. Používanie okrajov vám tiež umožňuje nastaviť zarovnanie obrázka na stred: umožňuje vám vyriešiť mnoho problémov spojených s umiestnením prvku na stránke.

Zarovnajte blok doľava alebo doprava

Niekedy nie je potrebné centrovanie spôsobom CSS, ale musíte umiestniť dva bloky vedľa seba: jeden na ľavý okraj, druhý na pravý. Na tento účel existuje vlastnosť float, ktorá môže nadobúdať jednu z troch hodnôt: left, right alebo none. Povedzme, že máte dva bloky, ktoré je potrebné umiestniť vedľa seba. Potom bude kód vyzerať takto:

• .left (float:left;)
• .right(float:right)

Ak existuje aj tretí blok, ktorý by sa mal nachádzať pod prvými dvoma blokmi (napríklad päta), potom je potrebné nastaviť vlastnosť clear:

• .left (float:left;)
• .right(float:right)
• päta (jasné: obe)

Faktom je, že bloky s triedami vľavo a vpravo vypadnú zo všeobecného toku, to znamená, že všetky ostatné prvky ignorujú samotnú existenciu zarovnaných prvkov. Vlastnosť clear:both umožňuje päte alebo akémukoľvek inému bloku vidieť prvky, ktoré vypadli z toku, a zakazuje zalamovanie (plávanie) vľavo aj vpravo. Preto sa v našom príklade päta posunie nadol.

Vertikálne zarovnanie

Sú prípady, kedy nestačí nastaviť zarovnanie na stred spôsobmi CSS, ale treba zmeniť aj vertikálnu polohu podradeného bloku. Akýkoľvek vložený alebo vložený prvok môže byť zarovnaný s hornou alebo spodnou časťou, môže byť v strede nadradeného prvku alebo v akejkoľvek polohe. Najčastejšie je potrebné blok vycentrovať, čo sa robí pomocou atribútu vertical-align. Povedzme, že existujú dva bloky, jeden vnorený do druhého. V tomto prípade je vnútorný blok prvkom inline-block (zobrazenie: inline-block). Podradený blok musíte zarovnať vertikálne:

• zarovnanie hore - .child(vertical-align:top);
• zarovnanie na stred - .child(vertical-align:middle);
• zarovnanie dole - .child(vertical-align:bottom);

Prvky na úrovni bloku nie sú ovplyvnené zarovnaním textu ani zvislým zarovnaním.

Možné problémy so zarovnanými blokmi

Niekedy môže centrovanie prvku div spôsobom CSS spôsobiť malé problémy. Napríklad pri použití float: povedzme, že existujú tri bloky: .prvý, .druhý a .tretí. Druhý a tretí blok leží v prvom. Prvok s triedou second je zarovnaný doľava a posledný blok je zarovnaný doprava. Po vyrovnaní obaja vypadli z potoka. Ak nadradený prvok nemá nastavenú výšku (napríklad 30em), tak sa už nenatiahne do výšky podradených blokov. Aby sa tejto chybe vyhli, používajú „medzerník“ – špeciálny blok, ktorý vidí .sekundu a .tretinu. CSS kód:

• .second(float:left)
• .third(float:right)
• .clearfix(výška:0; jasná: obe;)

Často sa používa pseudotrieda :after, ktorá vám tiež umožňuje vrátiť bloky na miesto vytvorením pseudo medzerníka (v príklade sa prvok div s triedou kontajnera nachádza vo vnútri .first a obsahuje .left a .right):

• .left(float:left)
• .right(float:right)
• .container:after(content:""; display:table; clear:both;)

Vyššie uvedené možnosti sú najbežnejšie, aj keď existuje niekoľko variácií. Vždy môžete nájsť najjednoduchší a najpohodlnejší spôsob, ako vytvoriť pseudo spacer prostredníctvom experimentovania.

Ďalším problémom, s ktorým sa dizajnéri rozloženia často stretávajú, je zarovnanie prvkov inline-block. Za každým z nich sa automaticky pridá medzera. S tým sa pomáha vyrovnať vlastnosť margin, ktorá je nastavená na záporný margin. Existujú aj iné spôsoby, ktoré sa používajú oveľa menej často: napríklad nulovanie V tomto prípade sa vo vlastnostiach nadradeného prvku zapíše font-size:0. Ak sa vo vnútri blokov nachádza text, požadovaná veľkosť písma je už vrátená vo vlastnostiach prvkov vloženého bloku. Napríklad veľkosť písma: 1 em. Metóda nie je vždy vhodná, takže možnosť s vonkajšími zárezmi sa používa oveľa častejšie.

Zarovnanie blokov vám umožňuje vytvárať krásne a funkčné stránky: toto je rozloženie všeobecného rozloženia, umiestnenie tovaru v internetových obchodoch a fotografie na stránke vizitky.

Od autora: Vítam vás späť na stránkach nášho blogu. V dnešnom článku by som chcel hovoriť o rôznych technikách zarovnania, ktoré sa dajú aplikovať na bloky aj ich obsah. Najmä ako zarovnať bloky v css, ako aj zarovnanie textu.

Zarovnajte bloky do stredu

Je ľahké vycentrovať blok v css. Toto je pre mnohých najznámejšia technika, ale najskôr by som o nej chcel hovoriť. Toto má byť vycentrované horizontálne vzhľadom na nadradený prvok. Ako sa vykonáva? Povedzme, že máme kontajner a náš testovaný subjekt je v ňom:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Predpokladajme, že toto je hlavička stránky. Nepresahuje celú šírku okna a musíme ho vycentrovať. Píšeme takto:

#header( šírka/maximálna šírka: 800px; okraj : 0 auto ;

Musíme zadať presnú alebo maximálnu šírku a potom napísať vlastnosť kľúča - margin: 0 auto. Nastavuje okraje pre našu hlavičku, prvá hodnota určuje okraje zhora a zdola a druhá - vpravo a vľavo. Hodnota auto dáva prehliadaču pokyn, aby automaticky vypočítal výplň na oboch stranách tak, aby bol prvok presne vycentrovaný na nadradený prvok. Pohodlné!

Zarovnanie textu

Toto je tiež veľmi jednoduchý trik. Na zarovnanie všetkých vložených prvkov môžete použiť vlastnosť zarovnania textu a jej hodnoty: vľavo, vpravo, na stred. Ten vycentruje text, čo je to, čo chceme. Rovnakým spôsobom je možné zarovnať aj obrázok, pretože je štandardne tiež vloženým prvkom.

Zarovnajte text vertikálne

Ale toto je už ťažšie. V predvolenom nastavení neexistuje taká jednoduchá známa vlastnosť, ktorá by ľahko vycentrovala text v blokovom kontajneri vertikálne. Existuje však niekoľko trikov, ktoré dizajnéri rozloženia v priebehu rokov vymysleli.

Nastavte výšku bloku pomocou výplne. Spôsob je nenastavovať explicitnú výšku s výškou, ale vytvoriť ju umelo s hornými a spodnými vypchávkami, ktoré by mali byť rovnaké. Vytvorme ľubovoľný blok a napíšme doň nasledujúce vlastnosti:

div( pozadie: #ccc; padding: 30px 0; )

div ( pozadie : #ccc; padding : 30px 0 ;

Pozadie je len na to, aby ste vizuálne videli okraje, ako aj výplň. Výška bloku sa teraz skladá z týchto dvoch zarážok a samotnej čiary a všetko vyzerá takto:

Definujte výšku čiary pre blok. Zdá sa mi, že toto je správnejší spôsob, ak potrebujete zarovnať jeden riadok textu. Pomocou neho môžete zaznamenať normálnu výšku pomocou vlastnosti height. Potom musí tiež nastaviť výšku čiary, rovnakú ako výška bloku ako celku.

div( výška: 60px; výška riadku: 60px; )

div ( výška: 60px line-height: 60px;

Výsledok bude podobný ako na obrázku vyššie. Všetko bude fungovať, aj keď pridáte vypchávky. Avšak len na jeden riadok. Ak potrebujete viac textu v prvku, táto metóda nebude fungovať.

Previesť blok na bunku tabuľky. Podstatou tejto metódy je, že vlastnosť vertical-align: middle pôsobí na bunku tabuľky, ktorá prvok vertikálne vycentruje. Preto v tomto prípade musí byť blok nastavený takto:

div( display: table-cell; vertical-align: middle; )

div ( zobrazenie : tabuľka - bunka ; vertikálne - zarovnať : stred ;

Táto metóda je pekná, pretože do stredu môžete zarovnať toľko textu, koľko chcete. Ale je lepšie nastaviť display: table na blok, v ktorom je náš div vnorený, inak to nemusí fungovať.

No a tu sa dostávame k poslednému triku pre dnešok – tým je zarovnanie samotných blokov vertikálne. Je potrebné povedať, že opäť neexistuje žiadna vlastnosť, ktorá by bola na to určená, ale existuje niekoľko trikov, o ktorých by ste si mali byť vedomí.

Nastavte odchýlky v percentách. Ak poznáte výšku nadradeného prvku a umiestnite do neho ďalší prvok na úrovni bloku, môžete ho vycentrovať pomocou percentuálnej výplne. Napríklad rodič má výšku 600 pixelov. Vložíte do nej blok, ktorý má výšku 300px. Koľko potrebujete zálohovať zhora a zdola, aby ste to vycentrovali? 150 pixelov, čo je 25 % výšky rodiča.

Táto metóda vám umožňuje vykonávať centrovanie iba vtedy, keď vám rozmery umožňujú vykonávať výpočty. A ak máte rodiča na výšku 887 pixelov, nebudete môcť napísať nič presne, to je už jasné.

Vložte prvok do bunky tabuľky. Opäť platí, že ak prevedieme nadradený prvok na bunku tabuľky, potom sa do nej vložený blok automaticky vertikálne vycentruje. Aby to bolo možné, rodič stačí nastaviť vertikálne zarovnanie: stred.

A ak okrem toho napíšeme aj margin: 0 auto, prvok bude vycentrovaný vodorovne!

Myslím si, že mnohí z vás, ktorí ste robili práce s rozložením, sa stretli s potrebou zarovnať prvky vertikálne a viete, aké ťažkosti vznikajú pri zarovnávaní prvku na stred.

Áno, pre vertikálne zarovnanie v CSS existuje špeciálna vlastnosť vertikálneho zarovnania s mnohými hodnotami. V praxi to však nefunguje podľa predstáv. Skúsme na to prísť.

Porovnajme nasledujúce prístupy. Zarovnanie s:

• stoly,
• odsadenie,
• výška riadku,
• strečing,
• záporná marža,
• transformovať,
• pseudo prvok
• flexbox.

Ako ilustráciu si predstavte nasledujúci príklad.

Existujú dva prvky div, pričom jeden je vnorený do druhého. Dajme im vhodné triedy – vonkajšie a vnútorné .

Cieľom je zarovnať vnútorný prvok do stredu vonkajšieho prvku.

Na začiatok zvážte prípad, keď veľkosti vonkajšieho a vnútorného bloku známy. Pridajme display: inline-block k vnútornému prvku a text-align: center a vertical-align: middle k vonkajšiemu prvku.

Pamätajte, že zarovnanie sa vzťahuje iba na prvky, ktoré majú režim zobrazenia vnorený alebo vložený blok.

Nastavme veľkosti blokov, ako aj farby pozadia, aby sme videli ich okraje.

Vonkajšie ( šírka: 200px; výška: 200px; zarovnanie textu: na stred; zvislé zarovnanie: na stred; farba pozadia: #ffc; ) .vnútorné ( displej: vložený blok; šírka: 100px; výška: 100px; farba pozadia : #fcc ;)
Po použití štýlov uvidíme, že vnútorný blok je zarovnaný horizontálne, ale nie vertikálne:
http://jsfiddle.net/c1bgfffq/

Prečo sa to stalo? Faktom je, že vlastnosť vertical-align ovplyvňuje zarovnanie samotný prvok, nie jeho obsah(okrem prípadov, keď sa použije na bunky tabuľky). Preto aplikovanie tejto vlastnosti na vonkajší prvok neurobilo nič. Navyše, aplikácia tejto vlastnosti na vnútorný prvok tiež nič neurobí, pretože vložené bloky sú vertikálne zarovnané so susednými blokmi a v našom prípade máme jeden vložený blok.

Na vyriešenie tohto problému existuje niekoľko techník. Pozrime sa bližšie na každý z nich nižšie.

Zarovnanie s tabuľkou

Prvé riešenie, ktoré prichádza na myseľ, je nahradiť vonkajší blok jednobunkovým stolom. V tomto prípade sa zarovnanie použije na obsah bunky, teda na vnútorný blok.

http://jsfiddle.net/c1bgfffq/1/

Zjavnou nevýhodou tohto riešenia je, že z hľadiska sémantiky je nesprávne používať tabuľky na zarovnávanie. Druhou nevýhodou je, že na vytvorenie tabuľky je potrebné pridať ešte jeden prvok okolo vonkajšieho bloku.

Prvé mínus sa dá čiastočne odstrániť nahradením tagov table a td za div a nastavením režimu zobrazenia tabuľky v CSS.

.vonkajší obal ( displej: tabuľka; ) .vonkajší ( displej: bunka tabuľky; )
Vonkajší blok však stále zostane stolom so všetkými z toho vyplývajúcimi dôsledkami.

Zarovnanie s výplňou

Ak sú známe výšky vnútorného a vonkajšieho bloku, potom je možné zarovnanie nastaviť pomocou vertikálnej výplne vnútorného bloku pomocou vzorca: (H vonkajšie - H vnútorné) / 2.

Vonkajšie ( výška: 200px; ) .vnútorné (výška: 100px; okraj: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nevýhodou riešenia je, že je použiteľné len v obmedzenom počte prípadov, keď sú známe výšky oboch blokov.

Zarovnanie s výškou čiary

Ak viete, že vnútorný blok by nemal zaberať viac ako jeden riadok textu, môžete použiť vlastnosť line-height a nastaviť ju na rovnakú výšku ako výška vonkajšieho bloku. Keďže obsah vnútorného bloku by sa nemal zalamovať do druhého riadku, odporúča sa pridať aj medzery: nowrap a overflow: skryté pravidlá.

Vonkajšie ( výška: 200px; výška riadku: 200px; ) .vnútorné (biele miesto: nowrap; pretečenie: skryté; )
http://jsfiddle.net/c1bgfffq/12/

Túto techniku ​​je možné použiť aj na zarovnanie viacriadkového textu, ak prepíšete hodnotu výšky riadka pre vnútorný blok a pridáte zobrazenie pravidiel: inline-block a vertical-align: middle .

Vonkajšie ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

Nevýhodou tejto metódy je, že musí byť známa výška vonkajšieho bloku.

Stretch Alignment

Túto metódu možno použiť, keď výška vonkajšieho bloku nie je známa, ale výška vnútorného bloku je známa.

Na to potrebujete:

1. nastavenie relatívnej polohy k vonkajšiemu bloku a absolútnej polohy k vnútornému bloku;
2. pridajte pravidlá horná: 0 a spodná: 0 k vnútornému bloku, v dôsledku čoho sa roztiahne na celú výšku vonkajšieho bloku;
3. nastavte hodnotu na auto pre zvislé čalúnenie vnútorného bloku.

.vonkajšia ( pozícia: relatívna; ) .vnútorná ( výška: 100px; pozícia: absolútna; hore: 0; dole: 0; okraj: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Podstata tejto techniky spočíva v tom, že nastavenie výšky pre natiahnutý a absolútne umiestnený blok spôsobí, že prehliadač vypočíta zvislé odsadenie v rovnakých pomeroch, ak je ich hodnota nastavená na auto.

Zarovnanie so záporným okrajom-vrchol

Táto metóda sa stala všeobecne známou a používa sa veľmi často. Rovnako ako predchádzajúci sa aplikuje, keď nie je známa výška vonkajšieho bloku, ale je známa výška vnútorného.

Vonkajší blok musíte nastaviť na relatívne umiestnenie a vnútorný blok na absolútne umiestnenie. Potom musíte posunúť vnútornú krabicu nadol o polovicu výšky hornej časti vonkajšej krabice: 50 % a posunúť ju nahor o polovicu jej vlastnej výšky okraj-hor: -H vnútorné / 2.

Vonkajšia ( pozícia: relatívna; ) .vnútorná ( výška: 100 pixelov; pozícia: absolútna; horná časť: 50 %; okraj navrchu: -50 pixelov; )
http://jsfiddle.net/c1bgfffq/13/

Nevýhodou tejto metódy je, že musí byť známa výška vnútornej jednotky.

Zarovnanie s transformáciou

Táto metóda je podobná predchádzajúcej, ale môže sa použiť, keď nie je známa výška vnútorného bloku. V tomto prípade namiesto nastavenia zápornej výplne v pixeloch môžete použiť vlastnosť transform a zdvihnúť vnútorný rámček pomocou funkcie translateY a hodnoty -50 % .

Vonkajšia ( pozícia: relatívna; ) .vnútorná ( pozícia: absolútna; horná: 50 %; transformácia: preložiťY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Prečo v predchádzajúcej metóde nebolo možné nastaviť hodnotu v percentách? Keďže percentuálne hodnoty vlastnosti margin sú relatívne k rodičovskému prvku, hodnota 50 % by sa rovnala polovici výšky vonkajšieho rámčeka a vnútorný rámček by sme museli zvýšiť o polovicu jeho vlastnej výšky. Presne na to slúži vlastnosť transform.

Nevýhodou tejto metódy je, že ju nemožno použiť, ak má vnútorný blok absolútne polohovanie.

Zarovnanie s Flexboxom

Najmodernejším spôsobom vertikálneho zarovnania je použitie flexibilného rozloženia boxu (ľudovo známeho ako Flexbox). Tento modul umožňuje flexibilne ovládať umiestnenie prvkov na stránke a umiestniť ich takmer kdekoľvek. Zarovnanie na stred pre Flexbox je veľmi jednoduchá úloha.

Vonkajší blok musí byť nastavený na zobrazenie: flex a vnútorný blok musí byť nastavený na margin: auto. A to je všetko! Nádhera, však?

Vonkajšie ( displej: flex; šírka: 200px; výška: 200px; ) .vnútorné (šírka: 100px; okraj: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nevýhodou tejto metódy je, že Flexbox podporujú iba moderné prehliadače.

Ktorý spôsob si vybrať?

Je potrebné vychádzať z vyjadrenia problému:

• Na vertikálne zarovnanie textu je lepšie použiť zvislé odsadenie alebo vlastnosť line-height.
• Pre absolútne umiestnené prvky so známou výškou (ako sú ikony) je ideálny prístup so záporným okrajom.
• Pre zložitejšie prípady, kde výška bloku nie je známa, by sa mal použiť pseudoprvok alebo vlastnosť transform.
• No, ak máte to šťastie, že nepotrebujete podporovať staršie verzie IE, potom je samozrejme lepší Flexbox.

Štítky: Pridajte štítky

Horizontálne a vertikálne zarovnanie prvkov je možné vykonať rôznymi spôsobmi. Výber metódy závisí od typu prvku (blok alebo inline), od typu jeho umiestnenia, veľkosti atď.

1. Horizontálne zarovnanie na stred bloku / strany

1.1. Ak má blok šírku:

div ( šírka: 300px; okraj: 0 auto; /*vycentrovať prvok vodorovne v rámci rodičovského bloku*/ )

Ak chcete týmto spôsobom zarovnať vložený prvok, musíte ho nastaviť na zobrazenie: blok;

1.2. Ak je blok vnorený do iného bloku a nemá preň nastavené žiadne/šírka:

.wrapper(text-align:center;)

1.3. Ak má blok šírku a je potrebné ho upevniť v strede nadradeného bloku:

.wrapper (pozícia: relatívna; /*nastaví rodičovský rámček na relatívnu pozíciu, aby sme v ňom neskôr mohli úplne umiestniť rámček*/) .box ( šírka: 400px; pozícia: absolútna; vľavo: 50%; ľavý okraj: - 200px; / *posunie blok doľava o vzdialenosť rovnajúcu sa polovici jeho šírky*/ )

1.4. Ak pre bloky nie je nastavená žiadna šírka, môžete ich vycentrovať pomocou nadradeného bloku obalu:

.wrapper (text-align: center; /*vycentrovať obsah bloku*/) odsadenie medzi blokmi*/ )

2. Vertikálne zarovnanie

2.1. Ak text zaberá jeden riadok, napríklad pre tlačidlá a položky ponuky:

.button ( výška: 50px; výška riadku: 50px; )

2.2. Ak chcete zarovnať blok vertikálne vo vnútri nadradeného bloku:

.wrapper (pozícia: relatívna;) .box ( výška: 100px; pozícia: absolútna; hore: 50%; okraj: -50px 0 0 0; )

2.3. Vertikálne zarovnanie podľa typu tabuľky:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. Ak má rámček nastavenú šírku a výšku a je potrebné ho vycentrovať na rodičovský rámček:

.wrapper ( pozícia: relatívna; ) .box ( výška: 100px; šírka: 100px; pozícia: absolútna; hore: 0; vpravo: 0; dole: 0; vľavo: 0; okraj: auto; pretečenie: auto; /*do obsah sa nerozšíril */ )

2.5. Absolútne umiestnenie do stredu stránky/bloku pomocou transformácie CSS3:

ak má prvok rozmery

div ( šírka: 300px; /*nastaviť šírku bloku*/ výšku:100px; /*nastaviť výšku bloku*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50% ;)

ak prvok nemá žiadne rozmery a nie je prázdny

h1 ( okraj: 0; transformácia: preložiť (-50 %, -50 %); pozícia: absolútna; hore: 50 %; vľavo: 50 %; )

Veľmi často je v rozložení potrebné vycentrovať nejaký prvok horizontálne a/alebo vertikálne. Preto som sa rozhodol spraviť článok s rôznymi spôsobmi centrovania, aby bolo všetko po ruke na jednom mieste.

Horizontálne zarovnanie

okraj: auto

Horizontálne zarovnanie s okrajom sa používa, keď je známa šírka centrovaného prvku. Funguje pre blokové prvky:

Prvok ( ľavý okraj: automaticky; pravý okraj: automaticky; šírka: 50 %; )

Zadaním automatickej hodnoty pravého a ľavého výplne budú rovnaké, čím sa prvok vycentruje horizontálne v rámci nadradeného bloku.

zarovnanie textu: na stred

Táto metóda je vhodná na centrovanie textu v rámci bloku. zarovnanie textu: na stred:

pozíciu a záporný okraj vľavo

Vhodné pre centrované bloky známej šírky. Rodičovský blok nastavíme na pozíciu: relatívne k pozícii voči nej, vycentrovaný prvok na pozíciu: absolútnu , ľavý: 50 % a záporný okraj vľavo, ktorého hodnota sa rovná polovici šírky prvku:

zobrazenie: inline-block + text-align: center

Metóda je vhodná na zarovnanie blokov neznámej šírky, ale vyžaduje nadradený obal. Takto môžete napríklad vycentrovať horizontálnu ponuku:

• Domov
• o autorovi

Vertikálne zarovnanie

line-height

Ak chcete zarovnať jeden riadok textu, môžete použiť rovnaké hodnoty výšky a riadkov pre nadradený blok. Vhodné pre tlačidlá, položky ponuky atď.

pozíciu a zápornú maržu nahor

Prvok možno vertikálne zarovnať tak, že mu dáte pevnú výšku a použijete polohu: absolútnu a zápornú hranicu rovnú polovici výšky zarovnávaného prvku. Rodičovský blok by mal mať pozíciu: relatívny:

Wrapper ( pozícia: relatívna; ) prvok ( výška: 200 pixelov; okraj: -100 pixelov 0 0; pozícia: absolútna; hore: 50 %; )

Pomocou polohovania a záporných okrajov teda môžete prvok na stránke vycentrovať.

displej: tabuľka-bunka

V prípade vertikálneho zarovnania sa na prvok aplikuje vlastnosť display: table-cell, vďaka čomu emuluje bunku tabuľky. Nastavíme aj výšku a vertikálne zarovnáme: stred. Toto všetko zabalíme do kontajnera s vlastnosťou dislpay: tabuľka; :

Dynamicky zarovnajte prvok na stránke

Pozreli sme sa na spôsoby, ako zarovnať prvky na stránke pomocou CSS. Teraz sa pozrime na implementáciu jQuery.

Pridajme jQuery na stránku:

Navrhujem napísať jednoduchú funkciu na vycentrovanie prvku na stránke, nazvime ju alignCenter() . Samotný prvok funguje ako argument funkcie:

Funkcia alignCenter(elem) ( // kód tu )

V tele funkcie dynamicky vypočítajte a priraďte súradnice stredu stránky vlastnostiam CSS vľavo a hore:

Funkcia alignCenter(elem) ( elem.css(( left: ($(window).width() - elem.width()) / 2 + "px", top: ($(window).height() - el. height()) / 2 + "px" // nezabudnite k prvku pridať position: absolute, aby sa spustili súradnice )) )

V prvom riadku funkcie dostaneme šírku dokumentu a odpočítame od nej šírku prvku, rozdeleného na polovicu - to bude horizontálny stred stránky. Druhý riadok robí to isté, len s výškou, ktorá sa má zarovnať vertikálne.

Funkcia je pripravená, zostáva ju zavesiť na udalosti pripravenosti DOM a zmeny veľkosti okna:

$(function() ( // volanie funkcie centrovania, keď je DOM pripravený alignCenter($(elem)); // volanie funkcie, keď sa zmení veľkosť okna $(window).resize(function() ( alignCenter($( elem)); )) // funkcia centrovania prvku alignCenter(elem) ( elem.css(( // výpočet ľavých a horných súradníc vľavo: ($(window).width() - elem.width()) / 2 + "px", hore: ($(window).height() - elem.height()) / 2 + "px" ))) ) ))

Aplikácia Flexboxu

Nové funkcie CSS3, ako je Flexbox, sa postupne dostávajú do hlavného prúdu. Táto technológia pomáha vytvárať značky bez použitia plavákov, polohovania atď. Dá sa použiť aj na vycentrovanie prvkov. Napríklad, aplikujme Flexbox na nadradený prvok .wrapper a vycentrujeme obsah vnútri:

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; výška: 500px; šírka: 500px; ) .wrapper .content ( okraj: auto; /* okraj: 0 automatický; iba horizontálny */ /* okraj: automatický 0; iba zvislý */ )

Toto pravidlo vycentruje prvok súčasne horizontálne a vertikálne - margin teraz funguje nielen pre horizontálne, ale aj pre vertikálne zarovnanie. A bez známej šírky/výšky.

Súvisiace zdroje

Pomôžte projektu