Ako vertikálne zarovnať text vo vnútri Flexboxu?

Tento článok ukazuje, ako vertikálne zarovnať text vo vnútri flexboxu:

• Použitie vlastnosti „align-item“.
• Použitie vlastnosti „ospravedlniť obsah“.

Metóda 1: Použitie vlastnosti „align-item“.

Na vertikálne zarovnanie textu môžu používatelia použiť „ align-item ” vlastnosť poskytovaná CSS. Pomáha prvkom nastaviť ich zarovnanie vo vnútri flexboxu. Možné polohy vertikálneho zarovnania môžu byť na „ top “, stredná “, alebo „ dno “strana.

Praktické ukážky zarovnania prvkov v týchto smeroch sú uvedené nižšie:

Príklad 1: Horná pozícia

Ak chcete zarovnať text vo vnútri flexboxu v hornej polohe, „ flexibilný štart “hodnota je poskytnutá do “ align-items ' nehnuteľnosť. Táto vlastnosť je priradená k hlavnej časti div, ktorá sa zobrazí ako flex. Predpokladajme, že div s triedou „ vertikálne “ sa vytvorí v súbore HTML. Potom v súbore CSS vyberte túto triedu a priraďte jej nasledujúce vlastnosti:

• Najprv je divu poskytnutý základný štýl a zarovnanie pomocou vlastností CSS color, background-color a height.
• Vlastnosť „display“ je tiež nastavená na „flex“, aby sa z nej stal flexbox.
• Nakoniec, ak chcete zobraziť text na začiatku flexboxu, nastavte vlastnosť „align-items“ na „flex-start.

Po vykonaní vyššie uvedeného kódu bude webová stránka vyzerať takto:

Na výstupe sa zobrazí, že text je teraz zarovnaný na hornej pozícii vo vnútri flexboxu.

Príklad 2: Stredná poloha

Ak chcete vertikálne zarovnať text na strednú pozíciu, nastavte „ stred „hodnota CSS“ align-items ' nehnuteľnosť:

Po vykonaní vyššie uvedeného kódu:

Vyššie uvedený výstup zobrazuje, že text je teraz zarovnaný v strede flexboxu.

Príklad 3: Spodná poloha

Ak chcete nastaviť text v spodnej časti flexboxu, priraďte „ ohybný koniec “hodnota k “ align-items ' nehnuteľnosť. Tentokrát sa text zarovná na pozíciu, kde končí flexbox znamená na spodnej strane:

Po vykonaní vyššie uvedeného kódu bude webová stránka vyzerať takto:

Vyššie uvedený výstup zobrazuje, že text je teraz vertikálne zarovnaný v spodnej polohe.

Metóda 2: Použitie vlastnosti „justify-content“.

' ospravedlniť-obsah Vlastnosť ” možno použiť aj na vertikálne zarovnanie textu vo vnútri flexboxu. Funguje však rovnako ako „ zarovnanie textu ” a zarovnáva prvky v smere riadkov. Ak chcete zmeniť smer zarovnania, „ flex-direction vlastnosť sa používa na nastavenie ospravedlniť-obsah “zarovnanie smerom k “ stĺpec “smer:

Vysvetlenie vyššie uvedeného kódu je uvedené nižšie:

• ' výška “, “ farba “ a „ polstrovanie-vľavo Vlastnosti fungujú rovnako ako vyššie uvedená metóda.
• Potom nastavte „ stĺpec “hodnota k “ flex-direction ” flexboxu na aplikovanie štýlov cez stĺpce.
• Potom sa „ ospravedlniť-obsah ” zarovná text vertikálne.
• Na záver, „ ohybný koniec ” hodnota zarovná prvok na “ dno “strana.

Poznámka : Používatelia môžu tiež nastaviť „ flexibilný štart “ a „ stred “hodnoty do “ top “ a „ stredná “strany, resp.

Napríklad po vykonaní vyššie uvedeného kódu webová stránka vyzerá takto:

Vyššie uvedený výstup zobrazuje, že text je zarovnaný v spodnej časti flexboxu.

Záver

Ak chcete vertikálne zarovnať text vo vnútri flexboxu, „ align-items “ a „ ospravedlniť-obsah ” Je možné využiť vlastnosti CSS. Obe tieto vlastnosti získajú „ flexibilný štart “, “ stred “ alebo „ ohybný koniec ” hodnoty na zarovnanie textu na “ top “, “ stredná “ a „ dno ” smeroch vo vnútri flexboxu, resp. Tento článok demonštroval vertikálne zarovnanie textu v flexboxe.