Div obsahu je vycentrovaný. Zarovnanie na stred v CSS. Zarovnanie reťazca alebo prvku string-* na stred

Tento typumožňuje prechod zakázaných prvkov.

Teraz prejdime k atribútu zarovnať. Nastavuje vodorovné zarovnanie objektov na deklaráciu tagu a zapadá za ňu. Zvyčajne sa dá použiť na zarovnanie obsahu doľava ( vľavo), pozdĺž pravého okraja ( správny), na stred ( stred) a podľa šírky textu ( ospravedlniť).

Nižšie uvediem príklad, v ktorom umiestnim obrázok a odsek do stredu.

Tento obsah bude vycentrovaný.

Upozorňujeme, že pre obrázok má atribút, ktorý analyzujeme, mierne odlišný význam.

V príklade, ktorý som použil align="stred". Vďaka tomu bol obraz zarovnaný tak, aby sa veta nachádzala jasne v strede obrazu.

Centrovacie nástroje v css

Oveľa častejšie sa využívajú vlastnosti CSS určené na zarovnávanie blokov, textu a grafického obsahu. Je to predovšetkým kvôli pohodliu a flexibilite implementačných štýlov.

Začnime teda prvou vlastnosťou centrovania textu – toto je text-zarovnať.

Funguje rovnako ako zarovnanie v . Spomedzi kľúčových slov si môžete vybrať jedno zo všeobecného zoznamu alebo zdediť vlastnosti predka ( dediť).

Chcel by som poznamenať, že v css3 môžete nastaviť ďalšie 2 parametre: začať– v závislosti od pravidiel písania textu (sprava doľava alebo naopak) nastaví zarovnanie vľavo alebo vpravo (podobne ako pri práci vľavo alebo vpravo) a koniec– opak začiatku (pri písaní textu zľava doprava funguje ako pravý, pri písaní sprava doľava – zľava).

Poviem vám o malom triku. Pri výbere hodnoty ospravedlniť posledný riadok môže zospodu nevábne visieť. Ak ho chcete napríklad umiestniť do stredu, môžete použiť nehnuteľnosť text-align-posledný.

Ak chcete obsah lokality alebo bunky tabuľky zarovnať vertikálne, použite vlastnosť vertikálne zarovnať. Nižšie som opísal hlavné kľúčové slová prvku.

Vrúbky

A nakoniec sa dostávame k zarážkam odsekov. Jazyk CSS využíva špeciálnu vlastnosť tzv zarážka textu.

S jeho pomocou môžete urobiť červenú čiaru aj výčnelok (treba zadať zápornú hodnotu).

Myslím si, že mnohí z vás, ktorí sa museli zaoberať rozložením, sa stretli s potrebou vertikálneho zarovnania prvkov a poznajú ťažkosti, ktoré vznikajú pri zarovnávaní prvku na stred.

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

Porovnajme nasledujúce prístupy. Zarovnajte pomocou:

• stoly,
• odsadenie,
• line-height
• strečing,
• záporná marža,
• transformovať
• pseudo prvok
• flexbox.

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

Najprv zvážime prípad, keď sú rozmery vonkajších a vnútorných blokov známy. Pridajme zobrazenie pravidla: 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.

Nastavíme veľkosti blokov, ako aj farby pozadia tak, 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? Ide o to, ž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 nič neprinieslo. Navyše, aplikácia tejto vlastnosti na vnútorný prvok tiež nič neurobí, pretože vložené bloky sú zarovnané vertikálne vzhľadom na susedné bloky a v našom prípade máme jeden vložený blok.

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

Zarovnanie pomocou tabuľky

Zjavnou nevýhodou tohto riešenia je, že zo sémantického hľadiska je nesprávne používať tabuľky na zarovnávanie. Druhou nevýhodou je, že vytvorenie tabuľky vyžaduje pridanie ďalšieho prvku 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.

Zarovnanie pomocou zarážok

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 pomocou výšky čiary

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 predefinujete hodnotu výšky riadku pre vnútorný blok a pridáte pravidlá zobrazenia: 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.

Zarovnanie pomocou "natiahnutia"

K tomu potrebujete:

1. nastaviť relatívne umiestnenie k vonkajšiemu bloku a absolútne umiestnenie 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 vertikálnu výplň vnútorného bloku na auto.

Myšlienkou tejto techniky je, že nastavenie výšky pre natiahnutý a absolútne umiestnený blok spôsobí, že prehliadač vypočíta zvislé vypchávky v rovnakom pomere, ak je nastavený na auto.

Zarovnanie so záporným okrajom-vrchol

Musíte nastaviť externý blok na relatívne umiestnenie a vnútorný blok na absolútne umiestnenie. Potom musíte posunúť vnútorný blok nadol o polovicu výšky vrchu vonkajšieho bloku: 50 % a zdvihnúť ho o polovicu jeho 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

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 nebolo možné nastaviť hodnotu v percentách v predchádzajúcej metóde? Keďže hodnoty percentuálneho rozpätia sa počítajú vzhľadom na nadradený prvok, hodnota 50 % by bola polovica výšky vonkajšieho rámčeka a vnútorný rámček by sme museli zvýšiť na polovicu jeho vlastnej výšky. Vlastnosť transform je na to ako stvorená.

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

Zarovnanie s Flexboxom

Vonkajší blok musí byť nastavený na zobrazenie: flex a vnútorný blok 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.

Akú metódu si mám vybrať?

• Na zvislé zarovnanie textu je lepšie použiť zvislé zarážky alebo vlastnosť line-height.
• Pre absolútne umiestnené prvky so známou výškou (napríklad ikony) je ideálna metóda s negatívnou vlastnosťou margin-top.
• V zložitejších prípadoch, keď výška bloku nie je známa, musíte použiť pseudo prvok alebo vlastnosť transform.
• No, ak máte také šťastie, že nepotrebujete podporovať staršie verzie prehliadača IE, potom je samozrejme lepšie použiť Flexbox.

Analyzujeme zarovnanie prvkov bloku v CCS. Niekoľko ich umiestnime do stredu DIV alebo LI prvkov. Pre väčšinu prípadov ponúkam niekoľko svojich možností.

Tento článok si nekladie za cieľ vymenovať všetky možnosti zarovnania a prepísať to, čo už niekde existuje. Nepamätám si prečo, ale často som nebol spokojný s ponúkanými možnosťami. Buď tam boli pevné bloky, alebo sa všetko rozpadlo pri adaptívnom rozložení, prípadne nejaké iné nedostatky.

Niekedy na zarovnanie na stred stačí pridať pár atribútov a nepotrebujete nič zložité. Napríklad aj ja.

Nižšie je uvedených niekoľko možností adaptívneho rozloženia na zarovnanie blokov v strede, ktoré I používam na ich webových stránkach. A ak je ten prvý celkom bežný, tak možno niektoré ďalšie spôsoby ani nebudú na internete popísané presne takto.

možnosť 1

Jednoduché zarovnanie všetkých blokov na stred stránky.

Poďme na stred UL obsah zo 4 prvkov LI, ktoré sú v bloku DIV s triedou kontajner.

V tomto prípade postačujú nasledujúce pravidlá v CSS:

Kontajner (
šírka: 100 %;
}

Kontajner ul (
text-align: center;
štýl zoznamu: žiadny;
}

Kontajner li (
displej: inline-block;
}

Získame nasledujúci pohľad: Tu sú vycentrované 4 prvky LI. Keď sa veľkosť obrazovky zmenší, prvky, ktoré sa nezmestia, sa presunú nadol.

Ak bloky LI s týmito nehnuteľnosťami nie sú inštalované v strede, čo znamená, že do nich zasahuje nejaký iný majetok. Môže to byť napríklad nehnuteľnosť plavák: vľavo alebo displej: tabuľka; alebo nejaký iný.

Teraz môžete pridať ďalšie štýly do hornej štruktúry (do základného rámca zarovnania CSS). Napríklad vytvorte bloky pevnej veľkosti a odsadzujte ich navzájom:

Kontajner li (
displej: inline-block;
okraj: 5px;
šírka: 100px;
}

Získame nasledovné:

Ale táto možnosť má jednu nevýhodu. Bloky sa nachádzajú v strede, ale vľavo a vpravo sú obrovské vzdialenosti. Dajú sa zmenšiť zmenou šírky.

Alebo môžete vytvoriť nádoby rovnakej veľkosti, takže priehlbiny budú iba medzi nádobami a na ľavej a pravej strane nebudú žiadne.

Potom odstránime marža a pridajte túto šírku šírka tak, aby úplne pokrýval oblasť.

Kontajner li (
vertikálne zarovnať: hore;
displej: inline-block;
šírka: 32,899 %;
}

Medzi blokmi bude malá oblasť prázdneho priestoru. A aby to bolo ešte väčšie, pomocou parametra sa môžete stiahnuť dovnútra vypchávka.

V blokoch schválne nepridávam nič navyše, aby som ponechal presne tie štýly, ktoré priamo ovplyvňujú zarovnanie. Ale ak urobíte to isté, nezískate takéto bloky. Ak len preto, po prvé, musíte do bloku pridať farbu a po druhé, ak je prázdny, vložte výška: 100px;. Ostatné atribúty sú podľa vášho želania.

Finálna verzia je:

Na snímke obrazovky vyššie som nechal ostatné oblasti webu, aby bolo jasné, kde sú hranice blokov, pretože ak susedia s okrajom, potom už nie je viditeľný samotný okraj. A na obrázku sú biele okraje vľavo a vpravo iné zarovnanie, ktoré nemá nič spoločné s príslušným príkladom. Opakujem, samotné bloky susedia s okrajmi, ktoré nie sú viditeľné, pretože bloky ich úplne zakrývajú.

Možnosť 2

Existuje mnoho spôsobov, ako vycentrovať bloky. Ale ak potrebujete urobiť zarovnanie inteligentnejšie, musíte si polámať hlavu. Našťastie som prišiel so zaujímavou metódou na nasledujúce účely:

Ako vycentrujem všetky divy, aby bol blok na ďalšom riadku zarovnaný doľava?

Máme nasledujúcu štruktúru:

Píšeme pre nich triedy:

šírka: 90 %;
okraj: 0 auto;
}

Archív-článok (
displej: inline-block;
vertikálne zarovnať: hore;

Šírka: calc(33,3333% - (0,666666666667 * 36px));
okraj: 0 10px 0 11px;
}

Upozorňujeme, že ak zmeníte veľkosť calc, potom je potrebné experimentálne upraviť rozmery marža. V opačnom prípade nebudú bloky vycentrované.

Toto zarovnanie sa musí vykonať okom. Ale ak je na novom riadku menej blokov ako na riadku vyššie, tento osamelý blok bude s ľavá strana. A vyzerá to oveľa krajšie, ako keď sa na ďalšom riadku nachádza jeden jediný blok v strede.

Použitím vyššie uvedenej techniky získame adaptívne rozloženie so všetkými okrajmi rovnakými, ktoré sa nezhorší pri zmene veľkosti obrazovky.

A ak chceme, aby mobilná verzia nemala 3 bloky, ale 2, tak v ccs pre rozlíšenie 768 pixelov rozdelíme bloky inak:

@media obrazovka a (maximálna šírka: 768 pixelov) (
.archive-article (
šírka: calc(47,3333 % - (0,666666666667 * 25px));
okraj: 0 10px 0 20px;
}
}

Dostaňme rovnaké bloky v mobilnej verzii, ale s dvoma blokmi na riadok:

Možnosť 3

Teraz zarovnáme pomocou flex. Môže sa to zdať ako ideálny spôsob levelovania, pretože to v skutočnosti funguje veľmi jednoducho. FLEX však nezvláda úlohu opísanú v možnosti 2. Prinajmenšom som nebol schopný dosiahnuť rovnaké výsledky.

Do ďalšej sekcie:

Pridanie štýlov:

#cssmenu (
okraj: 20px automaticky;
}

#cssmenu ul (
štýl zoznamu: žiadny;
displej: flex;
flex-wrap: zábal;
zdôvodniť-obsah: stred;
}

#cssmenu > ul > li (
okraj: 1px;
}

Dostaneme:

V uvedenom príklade:

flex-wrap: zábal;

Presunie bloky na ďalší riadok, ak plnia kontajner. V opačnom prípade sa dostanú ďalej mimo okna prehliadača.

zdôvodniť-obsah: stred;

Obsah blokov zarovnáme na stred.

Možnosť 4

Ďalšia možnosť zarovnania pomocou technológie flex.

Vo vnútri máme kontajner s dvoma blokmi. Tieto 2 bloky potrebujeme na rozdelenie šírky na dve rovnaké strany.

Za týmto účelom napíšeme do štýlov nasledujúce vlastnosti:

Kontajner (
displej: flex;
}

Blokovať (
ohybnosť: 100 %;
}

Možnosť 5

Existuje ďalšia možnosť centrovania blokov, ak je ich počet presne rovnaký. Napríklad: existuje 9 blokov, 3 pre každý riadok. A viete, že to tak vždy zostane. Napríklad vytvárate vstupnú stránku a určite viete, že medzi tieto bloky na stránku nepribudne nič zbytočné.

Máme teda 9 blokov nasledujúceho typu (riadky som neduplikoval 9-krát, ale majte na pamäti, že existuje 9 blokov):

Použite na ne štýly:

Archive-container-for-articles (
šírka: 100 %;
text-align: center;
}

Archív-článok (
šírka: 25 %;
vertikálne zarovnať: hore;
displej: inline-block;
zarovnanie textu: doľava;
}

Archive-article:n-th-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
okraj: 20px 0 30px 40px;
}

Archive-article:n-th-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
okraj: 20px 40px 30px;
}

Archive-article:n-th-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
okraj: 20px 40px 30px 0;
}

Dostaneme aj adaptívne rozloženie. Keď sa obrazovka zmenší, blok, ktorý sa nezmestí, sa presunie do stredu dole

Výhodou tohto typu centrovania je, že medzi blokmi môžete zreteľne a zreteľne robiť zárezy.

Hlavnou nevýhodou je, že do blokov nemožno umiestniť nič. Akýkoľvek prvok:

buď div alebo p alebo niečo iné, sa bude považovať za vnútorný prvok n-té dieťa. Výsledkom bude, že štýly CSS sa naň prekryjú a všetky zarážky vytvorené pomocou okraja posunú bloky inak, ako bolo pôvodne zamýšľané.