Un testo può essere facilmente aggiunto ovunque, ma senza allineamento può sembrare non rappresentabile e meno attraente. Il testo non allineato può anche disturbare l'intero aspetto di una pagina web. Per affrontare queste cose nelle applicazioni web, possiamo utilizzare alcune utili proprietà dei CSS che ti aiuteranno ad allineare i testi in pochissimo tempo.
Questo articolo mostrerà come allineare il testo verticalmente nei CSS.
Come allineare il testo verticalmente nei CSS?
In CSS, puoi utilizzare le seguenti proprietà per allineare il testo verticalmente:
-
- proprietà dell'altezza della linea
- visualizzare e allineare le proprietà degli elementi
Ora, esaminiamo ogni metodo uno per uno!
Metodo 1: utilizzo della proprietà line-height per allineare il testo verticalmente nei CSS
Il ' altezza della linea La proprietà ” specifica l'area sotto e verso l'alto degli elementi in linea. Imposta la distanza di un testo da altri elementi. Utilizzando la proprietà line-height, il testo può essere facilmente allineato verticalmente al centro.
Esempio
Ecco un testo all'interno di una casella (bordo) attualmente situata in alto a sinistra. Allineiamo questo testo al centro verticalmente e orizzontalmente:
Ora passiamo al metodo successivo. “ Flexbox ” è un layout unidimensionale che consente di formattare HTML. Puoi anche utilizzarlo per allineare gli elementi verticalmente o orizzontalmente. Quindi, facciamo un esempio e allineiamo un testo verticalmente con l'aiuto del flexbox. Esempio Per prima cosa renderemo flessibile il nostro container impostando il valore di “ Schermo ” proprietà come “ flettere ”. Quindi, usa il ' allineare-oggetti ” per impostare il contenuto al centro in verticale. Inoltre, per allineare il contenuto al centro orizzontalmente, il ' giustificare-contenuto ” verrà utilizzata la proprietà: In CSS, il testo può essere facilmente allineato verticalmente con l'aiuto del ' altezza della linea ' proprietà. Puoi anche utilizzare il ' scatola flessibile “ per l'allineamento verticale del testo con “ Schermo ' e ' allineare-oggetti ' proprietà. Flexbox è un layout unidimensionale e viene 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 verticalmente nei CSS.
Per farlo, aggiungi un contenitore “
Miglior sito web educativo !
div >
La scatola è formata utilizzando un ' 3px “confine e” 250px ' altezza. Il ' dimensione del font ” proprietà è utilizzata con il valore “ 24px ” per rendere visibile il carattere. Assegneremo a div un “ altezza della linea ' di ' 250px ” per allineare il testo verticalmente al centro. Successivamente, useremo il ' allineamento del testo ” per allineare il testo al centro:
altezza della linea: 250px;
allineamento testo: centro;
dimensione del carattere: 24px;
altezza: 250px;
bordo: 3px solido;
}
Come puoi vedere, il testo è stato allineato verticalmente al centro usando line-height e orizzontalmente al centro con la proprietà text-align. Metodo 2: utilizzo della proprietà display e align-items per allineare il testo verticalmente nei CSS
Schermo: flettere ;
allineare-elementi: centro;
giustificare-contenuto: centro;
dimensione del carattere: 24px;
altezza: 200px;
bordo: 3px solido;
}
Il testo specificato è stato allineato correttamente al centro:
Abbiamo fornito metodi relativi all'allineamento verticale del testo nei CSS. Conclusione