Text možno ľahko pridať kdekoľvek, ale bez zarovnania môže vyzerať neprezentovateľne a menej atraktívne. Nezarovnaný text môže tiež narušiť celkový vzhľad webovej stránky. Na riešenie takýchto vecí vo webových aplikáciách môžeme použiť niektoré užitočné vlastnosti CSS, ktoré vám pomôžu rýchlo zarovnať texty.
Tento článok ukáže, ako zarovnať text vertikálne v CSS.
Ako zarovnať text vertikálne v CSS?
V CSS môžete použiť nasledujúce vlastnosti na vertikálne zarovnanie textu:
-
- vlastnosť výšky riadku
- vlastnosti display a align-items
Teraz si prejdime každú metódu jednu po druhej!
Metóda 1: Použitie vlastnosti výšky riadku na vertikálne zarovnanie textu v CSS
' line-height vlastnosť určuje oblasť pod a nahor vloženými prvkami. Nastavuje vzdialenosť textu od ostatných položiek. Pomocou vlastnosti line-height je možné text jednoducho zarovnať vertikálne na stred.
Príklad
Tu je text v rámčeku (okraji), ktorý sa momentálne nachádza v ľavej hornej časti. Zarovnajme tento text na stred vertikálne a horizontálne:
Teraz prejdime k ďalšej metóde. “ Flexbox ” je jednorozmerné rozloženie, ktoré vám umožňuje formátovať HTML. Môžete ho tiež použiť na zarovnanie položiek vertikálne alebo horizontálne. Vezmime si teda príklad a zarovnajme text vertikálne pomocou flexboxu. Príklad V prvom rade urobíme náš kontajner flexibilným nastavením hodnoty „ displej “vlastnosť ako “ flex “. Ďalej použite „ align-items ” vlastnosť pre vertikálne nastavenie obsahu v strede. Navyše, ak chcete obsah zarovnať vodorovne na stred, „ ospravedlniť-obsah ” nehnuteľnosť sa použije: V CSS je možné text ľahko zarovnať vertikálne pomocou „ line-height ' nehnuteľnosť. Môžete tiež využiť „ flexbox “ pre vertikálne zarovnanie textu s “ displej “ a „ align-items vlastnosti. Flexbox je jednorozmerné rozloženie a jednoducho sa používa na vertikálne alebo horizontálne zarovnanie položiek. Tento príspevok ponúka dve najjednoduchšie metódy, ktoré vám môžu pomôcť vertikálne zarovnať text v CSS.
Ak to chcete urobiť, pridajte nádobu “
Najlepšie vzdelávacie webové stránky !
div >
Krabica je vytvorená pomocou „ 3px „hranica a“ 250 pixelov 'výška. ' veľkosť písma “vlastnosť sa používa s hodnotou” 24 pixelov “, aby bolo písmo viditeľné. Priradíme div a “ line-height “z “ 250 pixelov ” na zvislé zarovnanie textu na stred. Ďalej použijeme „ zarovnanie textu ” vlastnosť na zarovnanie textu na stred:
line-height: 250px;
text-align: center;
veľkosť písma: 24px;
výška: 250px;
orámovanie: 3px plné;
}
Ako vidíte, text bol zarovnaný vertikálne na stred pomocou výšky riadku a horizontálne na stred pomocou vlastnosti zarovnanie textu. Metóda 2: Použitie vlastnosti display and align-items na vertikálne zarovnanie textu v CSS
zobraziť: flex ;
align-items: center;
zdôvodniť-obsah: stred;
veľkosť písma: 24px;
výška: 200px;
orámovanie: 3px plné;
}
Zadaný text bol úspešne zarovnaný na stred:
Poskytli sme metódy týkajúce sa vertikálneho zarovnania textu v CSS. Záver