Un text es pot afegir fàcilment a qualsevol lloc, però sense alineació, pot semblar poc presentable i menys atractiu. El text no alineat també pot alterar l'aspecte complet d'una pàgina web. Per abordar aquestes coses a les aplicacions web, podem utilitzar algunes propietats útils de CSS que us ajudaran a alinear els textos en molt poc temps.
Aquest article mostrarà com alinear el text verticalment en CSS.
Com alinear el text verticalment en CSS?
En CSS, podeu utilitzar les propietats següents per alinear el text verticalment:
-
- propietat d'alçada de línia
- mostrar i alinear les propietats dels elements
Ara, repassem cada mètode un per un!
Mètode 1: ús de la propietat line-height per alinear el text verticalment en CSS
El ' alçada de línia ” La propietat especifica l'àrea per sota i els elements en línia cap amunt. Estableix la distància d'un text amb altres elements. Utilitzant la propietat line-height, el text es pot alinear fàcilment verticalment al centre.
Exemple
Aquí hi ha un text dins d'un quadre (vora) situat actualment a la part superior esquerra. Alineem aquest text al centre verticalment i horitzontalment:
Ara anem cap al següent mètode. “ Flexbox ” és un disseny unidimensional que permet formatar HTML. També podeu utilitzar-lo per alinear elements verticalment o horitzontalment. Per tant, prenguem un exemple i alineem un text verticalment amb l'ajuda del flexbox. Exemple En primer lloc, flexibilitzarem el nostre contenidor establint el valor del ' visualització 'propietat com' flexionar ”. A continuació, utilitzeu ' alinear elements ” propietat per establir el contingut al centre verticalment. A més, per alinear el contingut al centre horitzontalment, el ' justificar-contingut S'utilitzarà la propietat: En CSS, el text es pot alinear fàcilment verticalment amb l'ajuda del ' alçada de línia ' propietat. També podeu utilitzar el ' flexbox ' per a l'alineació vertical del text amb ' visualització ' i ' alinear elements ” propietats. Flexbox és un disseny unidimensional i simplement s'utilitza per a l'alineació vertical o horitzontal dels elements. Aquesta publicació ofereix dos mètodes més fàcils que us poden ajudar a alinear el text verticalment en CSS.
Per fer-ho, afegiu un contenidor '
Millor lloc web educatiu !
div >
La caixa es forma amb un ' 3 píxels 'frontera i' 250 píxels “alçada. El ' mida de la font La propietat s'utilitza amb el valor ' 24 píxels ” per fer visible el tipus de lletra. Assignarem a div a ' alçada de línia ' de ' 250 píxels ” per alinear el seu text verticalment al mig. A continuació, utilitzarem el ' alineació de text ” propietat per alinear el text al centre:
alçada de línia: 250 px;
alineació de text: centre;
mida del tipus de lletra: 24px;
alçada: 250px;
vora: 3px sòlid;
}
Com podeu veure, el text s'ha alineat verticalment al centre mitjançant l'alçada de la línia i horitzontalment al centre amb la propietat text-align. Mètode 2: ús de la propietat de visualització i alineació d'elements per alinear el text verticalment en CSS
visualització: flexionar ;
elements d'alineació: centre;
justificar-contingut: centre;
mida del tipus de lletra: 24px;
alçada: 200px;
vora: 3px sòlid;
}
El text especificat s'ha alineat al centre correctament:
Hem proporcionat mètodes relacionats amb l'alineació vertical del text en CSS. Conclusió