Come allineare il testo in verticale in CSS

Un testo può essere facilmente aggiunto ovunque, ma senza allineamento, può sembrare impresuabile e meno attraente. Il testo non allineato può anche disturbare l'intero aspetto di una pagina web. Per affrontare tali cose nelle applicazioni Web, possiamo utilizzare alcune proprietà utili di CSS che ti aiuteranno ad allineare i testi in pochissimo tempo.

Questo articolo dimostrerà come allineare il testo in verticale in CSS.

Come allineare il testo in verticale in CSS?

In CSS, è possibile utilizzare le proprietà seguenti per allineare il testo in verticale:

• • Proprietà al piano di linea
  • Proprietà di visualizzazione e allineate

Ora, passiamo attraverso ogni metodo uno per uno!

Metodo 1: usando la proprietà della linea per allineare il testo in verticale in CSS

IL "altezza della linea"La proprietà specifica l'area sottostante e gli elementi in linea verso l'alto. Imposta la distanza di un testo da altri elementi. Usando la proprietà della linea di linea, il testo può essere facilmente allineato verticalmente al centro.

Esempio

Ecco un testo all'interno di una scatola (bordo) attualmente situato nella parte in alto a sinistra. Allineiamo questo testo al centro in verticale e orizzontale:

Per fare ciò, aggiungi un contenitore ""All'interno del tag del file HTML e specificare il testo richiesto in esso:

Miglior sito web educativo!

La scatola è formata usando un "3px"Border e"250px" altezza. IL "dimensione del fontLa proprietà "viene utilizzata con il valore"24px"Per rendere visibile il carattere. Assegneremo Div A “altezza della linea" Di "250px"Per allineare il suo testo verticalmente nel mezzo. Successivamente, useremo il “allineamento"Proprietà per allineare il testo al centro:

div
linea di linea: 250px;
Testo-align: centro;
Font-size: 24px;
Altezza: 250px;
bordo: 3px solido;

Come puoi vedere, il testo è stato allineato verticalmente al centro usando la linea di linea e orizzontalmente al centro con la proprietà.

Ora ci muoviamo verso il metodo successivo.

Metodo 2: utilizzando la proprietà Display e allinea elementi per allineare il testo in verticale in CSS

"Flexbox"È un layout unidimensionale che consente di formattare HTML. Puoi anche utilizzarlo per allineare gli elementi in verticale o in orizzontale.

Quindi, facciamo un esempio e allineiamo un testo in verticale con l'aiuto di Flexbox.

Esempio

Prima di tutto, renderemo flessibile il nostro contenitore impostando il valore di "Schermo"Proprietà come"flettere". Successivamente, usa il “allineare"Proprietà per l'impostazione del contenuto nel centro verticalmente. Inoltre, per allineare il contenuto al centro orizzontale, il "giustificare il contenuto"La proprietà verrà utilizzata:

div
display: flex;
ALIGE-ITMS: CENTRO;
giustificare contento: centro;
Font-size: 24px;
Altezza: 200px;
bordo: 3px solido;

Il testo specificato è stato allineato al centro con successo:

Abbiamo fornito metodi relativi all'allineamento del testo in verticale in CSS.

Conclusione

In CSS, il testo può essere facilmente allineato verticalmente con l'aiuto di "altezza della linea" proprietà. Puoi anche utilizzare il "Flexbox"Per l'allineamento verticale del testo con"Schermo" E "allineare" proprietà. Flexbox è un layout unidimensionale ed è semplicemente utilizzato per l'allineamento verticale o orizzontale degli articoli. Questo post ha offerto due metodi più semplici che possono aiutarti ad allineare il testo in verticale in CSS.