Besedilo je mogoče enostavno dodati kamor koli, a brez poravnave je lahko videti nepredstavljivo in manj privlačno. Neporavnano besedilo lahko tudi moti celoten videz spletne strani. Za reševanje takšnih stvari v spletnih aplikacijah lahko uporabimo nekaj uporabnih lastnosti CSS, ki vam bodo pomagale poravnati besedila v hipu.
Ta članek bo pokazal, kako navpično poravnati besedilo v CSS.
Kako navpično poravnati besedilo v CSS?
V CSS lahko uporabite spodnje lastnosti za navpično poravnavo besedila:
-
- lastnost line-height
- lastnosti prikaza in poravnave elementov
Zdaj pa pojdimo skozi vsako metodo eno za drugo!
1. način: uporaba lastnosti line-height za navpično poravnavo besedila v CSS
' višina vrstice ” lastnost določa področje spodaj in navzgor v vrstičnih elementih. Nastavi razdaljo besedila od drugih elementov. Z uporabo lastnosti line-height lahko besedilo enostavno navpično poravnate na sredino.
Primer
Tukaj je besedilo znotraj polja (obrobe), ki se trenutno nahaja na zgornji levi strani. Poravnajmo to besedilo na sredino navpično in vodoravno:
Zdaj pa pojdimo k naslednji metodi. “ Flexbox ” je enodimenzionalna postavitev, ki vam omogoča formatiranje HTML. Uporabite ga lahko tudi za navpično ali vodoravno poravnavo elementov. Torej, vzemimo primer in poravnajte besedilo navpično s pomočjo flexboxa. Primer Najprej bomo naš vsebnik naredili prilagodljiv z nastavitvijo vrednosti ' zaslon » lastnina kot « flex ”. Nato uporabite » align-items ” lastnost za nastavitev vsebine v sredini navpično. Poleg tega za poravnavo vsebine na sredini vodoravno uporabite » justify-content Lastnost bo uporabljena: V CSS lahko besedilo enostavno navpično poravnate s pomočjo ' višina vrstice ” lastnina. Uporabite lahko tudi » flexbox “ za navpično poravnavo besedila z “ zaslon « in » align-items ” lastnosti. Flexbox je enodimenzionalna postavitev in se preprosto uporablja za navpično ali vodoravno poravnavo elementov. Ta objava ponuja dve najpreprostejši metodi, ki vam lahko pomagata navpično poravnati besedilo v CSS.
Če želite to narediti, dodajte vsebnik '
Najboljše izobraževalno spletno mesto !
div >
Škatla je oblikovana z uporabo ' 3px 'meja in' 250 slikovnih pik 'višina. ' velikost pisave Lastnost se uporablja z vrednostjo 24 slikovnih pik ”, da bo pisava vidna. Div bomo dodelili ' višina vrstice ” od “ 250 slikovnih pik ” za navpično poravnavo besedila na sredini. Nato bomo uporabili » poravnava besedila ” za poravnavo besedila na sredino:
višina črte: 250px;
poravnava besedila: sredina;
velikost pisave: 24px;
višina: 250px;
obroba: 3px polna;
}
Kot lahko vidite, je bilo besedilo poravnano navpično na sredino z uporabo line-height in vodoravno na sredino z lastnostjo text-align. 2. način: Uporaba lastnosti prikaza in poravnave elementov za navpično poravnavo besedila v CSS
zaslon: flex ;
align-items: center;
justify-content: center;
velikost pisave: 24px;
višina: 200px;
obroba: 3px polna;
}
Navedeno besedilo je bilo uspešno poravnano na sredino:
Zagotovili smo metode, povezane z navpično poravnavo besedila v CSS. Zaključek