Horizontálne a vertikálne zarovnanie prvkov môže byť vykonané rôznymi spôsobmi. Výber metódy závisí od typu prvku (blok alebo inline), od typu umiestnenia, rozmerov atď.

1. Horizontálne zarovnanie na stred bloku / strany

1.1. Ak má blok šírku:

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

Ak chcete takto zarovnať vložený prvok, je potrebné ho nastaviť na zobrazenie: blok;

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

.wrapper (text-align: center;)

1.3. Ak má blok šírku a je potrebné ho pripevniť do stredu nadradeného bloku:

.wrapper (pozícia: relatívna; / * nastavenie relatívnej polohy pre nadradený rámček, aby sme neskôr mohli rámček v ňom úplne umiestniť * /) .box (šírka: 400px; pozícia: absolútna; vľavo: 50%; okraj- doľava: -200px; / * posun bloku doľava o vzdialenosť rovnajúcu sa polovici jeho šírky * /)

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

.wrapper (zarovnanie textu: na stred; / * obsah bloku umiestnite do stredu * /) .box (zobrazenie: inline-block; / * usporiadajte bloky do radu vodorovne * / okraj-vpravo: -0,25em ; / * odstráňte pravú zarážku medzi blokmi * /)

2. Vertikálne zarovnanie

2.1. Ak text presahuje 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 v rámci rodičovské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 (zobrazenie: tabuľka; šírka: 100 %;) .box (zobrazenie: tabuľka-bunka; výška: 100px; zarovnanie textu: na stred; zvislé zarovnanie: na stred;)

2.4. Ak má blok šírku a výšku a je potrebné ho vycentrovať na nadradený blok:

.wrapper (pozícia: relatívna;) .box (výška: 100px; šírka: 100px; pozícia: absolútna; horná: 0; pravá: 0; spodná: 0; ľavá: 0; okraj: auto; pretečenie: automatické; / * do obsah sa nevkrádal * /)

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

ak je prvok dimenzovaný

div (šírka: 300px; / * nastavenie šírky bloku * / výška: 100px; / * nastavenie výšky bloku * / transformácia: preložiť (-50 %, -50 %); pozícia: absolútna; hore: 50 %; vľavo: 50% ;)

ak prvok nie je kótovaný a nie je prázdny

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

Každý návrhár rozloženia neustále čelí potrebe zarovnať obsah do bloku: horizontálne alebo vertikálne. Existuje niekoľko dobrých článkov na túto tému, ale všetky ponúkajú veľa zaujímavých, ale málo praktických možností, a preto musíte venovať viac času, aby ste zdôraznili to hlavné. Tieto informácie som sa rozhodol odoslať vo forme, ktorá mi vyhovuje, aby som ich už negúglil.

Zarovnanie blokov so známymi rozmermi

Najjednoduchším spôsobom použitia CSS je zarovnanie blokov, ktoré majú vopred určenú výšku (pre vertikálne zarovnanie) alebo šírku (pre horizontálne zarovnanie).

Zarovnanie s výplňou

Niekedy nemôžete prvok vycentrovať, ale pridať k nemu okraje pomocou znaku " vypchávka".

Napríklad máte obrázok s rozmermi 200 x 200 pixlov a chcete ho vycentrovať do bloku 240 x 300. Môžeme nastaviť výšku a šírku vonkajšieho rámčeka = 200 pixlov a pridať 20 pixlov hore a dole a 50 vľavo a vpravo .

.example-wrapper1 (pozadie: # 535E73; šírka: 200px; výška: 200px; odsadenie: 20px 50px;)

Zarovnanie absolútne umiestnených boxov

Ak je blok nastavený na " pozícia: absolútna", potom ho možno umiestniť relatívne k najbližšiemu rodičovi pomocou" position: relativní ". Aby to bolo možné, všetky vlastnosti potrebujú (" top","správny","dno","vľavo") priraďte rovnakú hodnotu vnútornej jednotke, ako aj "rozpätie: auto".

* Existuje nuansa: Šírka (výška) vnútorného bloku + hodnota vľavo (vpravo, dole, hore) by nemala presiahnuť veľkosť nadradeného bloku. Bezpečnejšie je nastaviť vlastnosti vľavo (vpravo, dole, hore) na 0 (nula).

.example-wrapper2 (pozícia: relatívna; výška: 250px; pozadie: url (medzera.jpg);) .cat-king (šírka: 200px; výška: 200px; pozícia: absolútna; hore: 0; vľavo: 0; dole: 0; vpravo: 0; okraj: auto; pozadie: url (king.png);)

Horizontálne zarovnanie

Zarovnať s "text-align: center"

Existuje špeciálna vlastnosť na zarovnanie textu v bloku " zarovnanie textu". Keď je hodnota nastavená" stred"každý riadok textu bude zarovnaný vodorovne. Pri viacriadkovom texte sa toto riešenie používa len zriedka, častejšie túto možnosť nájdeme na zarovnanie rozpätí, odkazov alebo obrázkov."

Raz som musel vymyslieť text, aby som ukázal, ako funguje zarovnávanie textu pomocou CSS, ale nič zaujímavé ma nenapadlo. Najprv som sa rozhodol niekam skopírovať detskú riekanku, ale spomenul som si, že by to mohlo pokaziť jedinečnosť článku a naši milí čitatelia ho na Googli nenájdu. A potom som sa rozhodol napísať sem tento odsek - koniec koncov, pointa nie je s ním, ale pointa je v zarovnaní.

.example-text (text-align: center; padding: 10px; background: # FF90B8;)

Je potrebné poznamenať, že táto vlastnosť bude fungovať nielen pre text, ale aj pre akékoľvek vložené prvky ("display: inline").

Ale tento text je zarovnaný doľava, ale je v bloku, ktorý je zarovnaný na stred vzhľadom na obal.

.example-wrapper3 (text-align: center; background: # FF90B8;) .inline-text (display: inline-block; width: 40%; padding: 10px; text-align: left; background: # FFEfee;)

Zarovnanie políčok s okrajmi

Prvky bloku so známou šírkou sa dajú ľahko horizontálne zarovnať, ak sú nastavené na „ľavý okraj: auto; pravý okraj: auto“. Zvyčajne sa používa skrátený zápis: " okraj: 0 auto"(namiesto nuly je možné použiť ľubovoľnú hodnotu). Táto metóda však nebude fungovať pre vertikálne zarovnanie.

.lama-wrapper (výška: 200px; pozadie: # F1BF88;) .lama1 (výška: 200px; šírka: 200px; pozadie: url (lama.jpg); okraj: 0 auto;)

Takto sa oplatí zarovnať všetky bloky tam, kde je to možné (kde sa nevyžaduje pevné alebo absolútne umiestnenie) - je to najlogickejšie a najprimeranejšie. Hoci sa to zdá samozrejmé, niekedy som videl odstrašujúce príklady s negatívnymi okrajmi, a tak som sa rozhodol objasniť.

Vertikálne zarovnanie

Existuje oveľa viac problémov s vertikálnym zarovnaním - zjavne to nebolo zabezpečené v CSS. Existuje niekoľko spôsobov, ako dosiahnuť požadovaný výsledok, ale všetky nie sú veľmi pekné.

Zarovnanie s vlastnosťou line-height

V prípade, že je v bloku iba jedna čiara, môžete dosiahnuť jej vertikálne zarovnanie použitím " výška riadku"a nastavenie na požadovanú výšku. Pre spoľahlivosť sa oplatí nastaviť aj" výšku ", ktorej hodnota sa bude rovnať hodnote "line-height ", pretože táto nie je podporovaná vo všetkých prehliadačoch.

.example-wrapper4 (line-height: 100px; color: # DC09C0; background: # E5DAE1; height: 100px; text-align: center;)

Je tiež možné dosiahnuť blokové zarovnanie pomocou viacerých čiar. Aby ste to dosiahli, budete musieť použiť ďalší obalový blok a nastaviť mu výšku riadku. Vnútorný blok môže byť viacriadkový, ale vyžaduje sa „inline“. Musíte naň použiť "vertical-align: middle".

.example-wrapper5 (výška-riadka: 160px; výška: 160px; font-size: 0; pozadie: # FF9B00;) .example-wrapper5 .text1 (displej: inline-block; font-size: 14px; line-height: 1,5; zvislé zarovnanie: stred; pozadie: # FFFAF2; farba: # FF9B00; zarovnanie textu: na stred;)

Obalový blok musí mať nastavenú „veľkosť písma: 0“. Ak veľkosť písma nenastavíte na nulu, prehliadač zo seba pridá pár pixelov navyše. Budete tiež musieť zadať veľkosť písma a výšku riadku pre vnútorný blok, pretože tieto vlastnosti sa dedia od rodiča.

Vertikálne zarovnanie v tabuľkách

Nehnuteľnosť " vertikálne zarovnať"ovplyvňuje aj bunky tabuľky. Keď je nastavená hodnota" middle ", obsah vnútri bunky je vycentrovaný. Samozrejme, že rozloženie tabuľky sa dnes považuje za archaické, ale vo výnimočných prípadoch ho môžete simulovať zadaním" displej: tabuľka-bunka".

Zvyčajne používam túto možnosť na vertikálne zarovnanie. Nižšie je uvedený príklad rozloženia prevzatého z hotového projektu. Zaujímavosťou je obrázok, ktorý je takto vertikálne vycentrovaný.

.one_product .img_wrapper (display: table-cell; height: 169px; vertical-align: middle; overflow: hidden; background: #fff; width: 255px;) .one_product img (max-height: 169px; max-width: 100 %; minimálna šírka: 140px; zobrazenie: blok; okraj: 0 automaticky;)

Malo by sa pamätať na to, že ak má prvok „plávajúci“ iný ako „žiadny“, potom to bude v každom prípade blok (zobrazenie: blok) - potom budete musieť použiť ďalší obalový blok.

Zarovnanie s ďalším vloženým prvkom

A pre vložené prvky môžete použiť " vertikálne zarovnať: stred". V tomto prípade všetky prvky s" displej: inline„ktoré sú na rovnakej čiare, budú zarovnané so spoločnou stredovou čiarou.

Musíte vytvoriť pomocný blok s výškou rovnajúcou sa výške nadradeného bloku, potom bude požadovaný blok vycentrovaný. Na to je vhodné použiť pseudoprvky: pred alebo: za.

.example-wrapper6 (výška: 300px; zarovnanie textu: stred; pozadie: # 70DAF1;) .pudge (zobrazenie: inline-block; vertical-align: middle; background: url (pudge.png); background-color: # fff; width: 200px; height: 200px;) .riki (display: inline-block; height: 100%; vertical-align: middle;)

Displej: ohýbajte a zarovnávajte

Ak sa o používateľov Explorera 8 príliš nestaráte alebo vám na nich záleží natoľko, že ste kvôli nim ochotní vložiť nejaký dodatočný javascript, potom môžete použiť „display: flex“. Flex boxy odvádzajú skvelú prácu pri riešení problémov so zarovnaním a stačí napísať „margin: auto“, aby sa obsah vycentroval.

Zatiaľ sa mi táto metóda prakticky nestretla, ale neexistujú pre ňu žiadne špeciálne obmedzenia.

.example-wrapper7 (displej: flex; výška: 300px; pozadie: # AEB96A;) .example-wrapper7 img (margin: auto;)

To je všetko, čo som chcel napísať o zarovnaní CSS. Centrovanie obsahu už nebude problém!

Zarovnanie rôznych prvkov, napríklad na webe alebo stránke, je pre niekoho spočiatku náročná úloha, ktorá otriasa zvislým zarovnaním textu. Napodiv, jedným zo zložitejších spôsobov použitia CSS je vycentrovať obsah. Horizontálne centrovanie obsahu je v určitých časových bodoch relatívne jednoduché. Vertikálne centrovanie obsahu je takmer vždy ťažké. Vycentrovanie iného prvku, ktorý sa má vertikálne zarovnať, pomocou CSS. Toto je určite veľmi často kladená otázka, ktorá spôsobuje dizajnérom a webmasterom problémy. Existuje však veľa techník na vykonávanie vertikálneho centrovania a každá z nich sa používa pomerne ľahko.

Ak ste to niekedy skúšali, je to zložité, najmä ak sa chcete vyhnúť používaniu tabuliek. Našťastie naše volanie o pomoc bolo vypočuté a jednou z nových zbraní pridaných do arzenálu CSS na riešenie tohto problému je typ rozloženia známy ako flexibilné rozloženie boxov. Ako o pár okamihov zistíte, ktorý vám poskytuje skutočne skvelé funkcie na zjednodušenie zložitých rozložení. Niektoré z týchto skvelých funkcií vám tiež umožňujú vycentrovať obsah vertikálne a horizontálne, čomu sa budeme venovať v tomto návode. Do určitej miery to môžete urobiť pomocou výplne, ale môže to posunúť vaše rozloženie na menšie obrazovky. Pridanie vlastnej triedy CSS do šablóny so štýlmi znamená, že môžete vertikálne vycentrovať akýkoľvek obsah v priebehu niekoľkých sekúnd.

Vodorovné zarovnanie určuje, ako sú zarovnané ľavý a pravý okraj odseku medzi ľavým a pravým okrajom textového poľa. Vertikálne zarovnanie určuje vertikálne umiestnenie znaku v textovom poli. Nedostatok dobrých spôsobov vertikálneho centrovania prvkov v CSS bol temnou chybou v jeho povesti takmer počas celej jeho existencie.

Prvá metóda s výškou čiary

Prvý spôsob je jednoduchý a do istej miery banálny, pričom existujú nevýhody spočívajúce v obmedzení aplikácie. Pri kódovaní stránok html pre lokalitu je riadkovanie obsahu textu pravdepodobne jedným z atribútov, ktorý zvyčajne zostáva predvolený. Vo všeobecnosti musíme nastaviť výšku samotnej čiary, ktorá prichádza s podobnou výškou pre blok kde výška riadku nehnuteľnosť.

CSS

Constutesim_first (
ohraničenie: 2px plné # bf1515;
výška: 175px;
}
.constutesim_first> p (
line-height: 175px;
okraj: 0;
text-align: center;
výplň: 0;
veľkosť písma: 17px;
farba: # 3152a0;
rodina písiem: Tahoma;
váha písma: tučné;
}

Na prvý pohľad tiež vidíte, ako bude všetko vyzerať v skutočnosti.

Podobným spôsobom je možné implementovať ako exponovať obrázok, ktorý bude v strede a určite vertikálne. Zostáva len zaregistrovať jednu vlastnosť vertikálne zarovnať: stred; ktorý je zodpovedný za zobrazenie obrazu.

CSS

Druhá variácia (
orámovanie: 2px plná červená;
line-height: 158px;
}

Div druhej variácie (
text-align: center;
}
.druhá variácia img (
vertikálne zarovnať: stred;
orámovanie: 0px plné # 3a3838;
}

Obrázky implementujeme v strede a vo vertikálnom smere.

Zarovnanie s vlastnosťou polohy

Toto je pravdepodobne najznámejšia technika, ale najbežnejšia na použitie s CSS. Tu ale treba dodať, že to tiež nie je ideálne a aj tento spôsob má svoje drobné nuansy, ktoré sú spojené so stredom prvku, že ak sa nastaví v percentách, vycentruje sa na ľavú stranu prvku. horná strana, vo vnútri samotného blogu.

CSS

Competaird-option (
orámovanie: 2px plné # d40e0e;
výška: 162px;
poloha: relatívna;
}
.competaird-option div (
pozícia: absolútna;
horná časť: 50 %;
vľavo: 50 %;
výška: 28 %;
šírka: 49 %;
marža: -2 % 0 0 -25 %;
orámovanie: 2px plné # 4a4848;
}

Riadkovanie alebo výška riadkov je vertikálna výška medzi riadkami textu na vykreslenej stránke HTML. Takmer vždy túto hodnotu vzdialenosti nastaví prehliadač alebo renderer na zodpovedajúcu hodnotu. Táto hodnota zvyčajne závisí od typu písma zobrazenej stránky a ďalších faktorov.

Zarovnanie s vlastnosťou tabuľky

Pri tejto metóde používame osvedčenú starú metódu, kedy prerobíme prvky do tabuľky, v ktorej sa nachádzajú bunky. Čo sa týka tagu table, ten sa tu nepoužije, tu nastavíme úplne inú CSS vlastnosť, tou je display: table ;, display: table-cell ;. Ak hovoríme o najstarších verziách IE, potom sa tu údaje jednoducho nezobrazia. Dúfam, že ste aktualizovali svoj prehliadač, pretože je zastaraný a takmer všetko sa nezobrazuje správne.

Cherevertova variácia (
orámovanie: 2px plné # c30b0b;
výška: 173px;
displej: tabuľka;
šírka: 100 %;
veľkosť písma: 17px;
váha písma: tučné;
farba: # 3945a0;
}

Cherevert-variation div (
displej: tabuľka-bunka;
vertikálne zarovnať: stred;
text-align: center;
}

Najprv sa pozrime na predvolené nastavenie, ktoré používa väčšina prehliadačov. Vo väčšine moderných denných prehliadačov riadkovanie.

Zarovnanie s vlastnosťou flex

Tu sa dostávame k originálnejšej verzii, ktorá má svoje vlastné vlastnosti, ktoré len zriedka možno nájsť v rozložení internetového zdroja. Ale stále sa uplatňujú, že v niektorých prípadoch sú užitočné. Toto nastaví hlavnú os tak, aby sa definícia smerových ohybov zmestila do diskety.

CSS

Variant-horizontálne (
orámovanie: 2px plné # d20c0c;
výška: 147px;
displej: flex;
align-items: center;
justify-content: center;
veľkosť písma: 18px;
váha písma: tučné;
farba: # 49518c;
}

Môžete zadať hodnotu pre výšku riadku rovnako, ako by ste zadali akúkoľvek inú veľkosť v css, buď ako číslo, veľkosť v pixeloch alebo ako percento.

Zarovnanie s vlastnosťou transform

A teraz sme sa dostali k najextrémnejšej metóde, ale nie k úplne poslednej, pokiaľ ide o jej použitie vo webdizajne. Všetko je tu jednoduché, musíte posunúť zadaný prvok vertikálne o hodnotu, ktorú potrebujete. Nehnuteľnosť transformovať, toto je zoznam transformácií, ktoré inštalátor použije pri inštalácii balíka. Inštalačný program použije transformácie v poradí, v akom sú špecifikované vo vlastnosti.

CSS

Vertikálna medilpasudsa (
orámovanie: 2px plné # e00a0a;
výška: 158px;
veľkosť písma: 19px;
váha písma: tučné;
farba: # 353c71;
}
.vertical-medilpasudsa> div (
poloha: relatívna;
horná časť: 50 %;
transformovať: preložiťY (-50%);
text-align: center;
}

Keď zadáte hodnoty ako číslo, budú založené na aktuálnej veľkosti písma ako základ. Aktuálna veľkosť písma sa vynásobí číslom, ktoré zadáte, aby sa vypočítala výška riadku alebo medzera medzi riadkami.

Ak chcete znaky zarovnať na stred prvku vodorovne, musíte použiť zarovnanie textu: na stred. Jedna možnosť, ak ho chcete vertikálne vycentrovať a máte pevnú pätu a jeden riadok textu, nastavte výšku riadku tak, aby bola rovnaká ako výška päty.

Ak potrebujete vycentrovať text v rámci prvku, ako je div, hlavička alebo odsek, môžete použiť vlastnosť CSS text-align.

Zarovnanie textu má niekoľko platných vlastností:

Stred: Textúra je vycentrovaná;
vľavo: Zarovná sa na ľavú stranu kontajnera;
správny: Zarovnané na pravú stranu nádoby
odôvodniť: Nútené zarovnanie na ľavom aj pravom okraji nádoby, s výnimkou krajných čiar;
ospravedlniť všetko: Spôsobí, že extrémna čiara zarovná znaky;
začať: To isté ako vľavo, len ak ide smer zľava doprava. Ale bude správne, ak na začiatku nastavíte smer smeru textu, čo sa stane sprava doľava;
Koniec: Opak začiatku;
Matka-rodič: Podobne ako pri dedení, s výnimkou začiatku a konca sa vypočítava vzhľadom na nadradený prvok;

Tieto vlastnosti použite na zarovnanie textu v rámci nadradeného alebo zalamovacieho prvku div. Ak chcete vycentrovať text v elemente horizontálne, musíte použiť text-align: center.

Jedna možnosť, ak ho chcete vertikálne vycentrovať, ak máte pevnú hlavičku a jeden riadok textu, nastavte výšku riadku tak, aby bola rovnaká ako výška päty.

Zarovnanie prvkov na webovej stránke môže byť zložité, najmä pokiaľ ide o vertikálne zarovnanie textu. Táto otázka sa často vyskytuje na fórach a pre začínajúcich používateľov je obzvlášť ťažké vyriešiť tento problém. Ale v skutočnosti tu nie je nič zložité. Všetko, čo potrebujete, je malá znalosť kaskádových štýlov CSS. Keďže sa to všetko deje na úkor jeho pravidiel.

Vertikálne zarovnanie môžete dosiahnuť najmenej piatimi rôznymi spôsobmi. Každý z nich je dobrý svojím vlastným spôsobom, vzhľadom na okolnosti a podrobnosti situácie. Pozrieme sa na niekoľko príkladov a vy si na základe podmienok vyberiete pre seba vhodný rast.

Prvá metóda s výškou čiary

Prvý spôsob je veľmi bežný a má veľkú nevýhodu, ktorá obmedzuje jeho použitie. Ale napriek tomu, čokoľvek si človek môže povedať, môže sa to hodiť a dokonca priniesť požadovaný výsledok. Toto bude podmienené zarovnanie, pretože v podstate nastavujeme výšku riadku tak, aby zodpovedala výške bloku pomocou vlastnosti line-height.

prvý príklad. demo #1

/ * # 1 * / .talign1 (okraj: 1px plná červená; výška: 200px; / * výška bloku * /) .talign1> p (výška riadku: 200px; / * nastavenie výšky riadka tak, aby zodpovedala výške bloku * / okraj : 0; / * odstráňte okraje, ak existujú * / zarovnanie textu: na stred; / * zarovnajte text vodorovne na stred * / výplň: 0; / * odstráňte okraje, ak existujú * /) / * koniec # 1*/

Presne rovnakým spôsobom je možné implementovať obrázok do stredu vertikály, ale pridaním jednej novej vlastnosti, vertical-align: middle; ...

Príklad. Ukážka č. 2

/ * # 2 * / .talign2 (okraj: 1px plná červená; výška riadku: 200px; / * výška riadku bloku * /) .talign2 div (zarovnanie textu: na stred; / * zarovnanie prvkov vodorovne na stred * /) . talign2 img (vertikálne zarovnanie: stred; / * zarovnanie obrázkov zvislo na stred * / okraj: 1px plná čierna;) / * koniec # 2 * /

Zarovnanie s vlastnosťou polohy

Táto metóda je široko používaná v mnohých úlohách CSS, našu úlohu nevynímajúc. Treba si ale uvedomiť, že nie je úplne dokonalý a má svoje vedľajšie účinky. Je to preto, že centrovanie prvku, dané v percentách, bude vycentrované vľavo hore na vnútornej jednotke.

Preto musíte vonkajšiemu polstrovaniu nastaviť zápornú hodnotu. Horný okraj by mal mať polovicu výšky vnútornej jednotky a ľavý okraj by mal mať polovicu šírky. Tak dostaneme absolútny stred.

V tomto prípade je pravdepodobne nevyhnutné poznať presnú výšku a šírku podradeného prvku. V opačnom prípade sa môžu vyskytnúť chyby centrovania.

/ * # 3 * / .talign3 (ohraničenie: 1px plná červená; výška: 200px; / * výška bloku * / pozícia: relatívna;) .talign3 div (pozícia: absolútna; hore: 50 %; vľavo: 50 %; výška: 30%; šírka: 50%; okraj: -5% 0 0 -25%; okraj: 1px plná čierna;) / * koniec # 3 * /

Zarovnanie s vlastnosťou tabuľky

Tu používame starú techniku ​​premenením položiek na tabuľku s bunkami. V tomto prípade tabuľka tagy

nepoužije, ale použije vlastnosti CSS ako display: table; , zobrazenie: tabuľka-bunka; ... V starších verziách IE táto metóda nefunguje a nie je potrebná. Používa ich ešte niekto?

Príklad. demo #4

/ * # 4 * / .talign4 (okraj: 1px plná červená; výška: 200px; / * výška bloku * / zobrazenie: tabuľka; šírka: 100 %;) .talign4 div (zobrazenie: tabuľka-bunka; zvislé zarovnanie: stred ; zarovnanie textu: stred;) / * koniec # 4 * /

Zarovnanie s vlastnosťou flex

Toto je už špecifickejšia možnosť s vlastnosťami, ktoré nie sú v rozložení stránky také bežné. V zriedkavých prípadoch sú však veľmi užitočné.

Existuje niekoľko zásadne odlišných spôsobov, ako vertikálne vycentrovať objekt pomocou CSS, ale vybrať ten správny môže byť zložité. Na niektoré z nich sa pozrieme a na základe získaných poznatkov vytvoríme aj malú stránku.

Vertikálne zarovnanie na stred pomocou CSS nie je ľahké dosiahnuť. Existuje mnoho spôsobov a nie všetky fungujú vo všetkých prehliadačoch. Poďme sa pozrieť na 5 rôznych metód a na výhody a nevýhody každej z nich. Príklad.

1. spôsob

Táto metóda predpokladá, že nastavujeme nejaký prvok