CSS fornisce vari stili di allineamento, come sinistro, destro, centro, giustificato, orizzontale e verticale, per diversi tipi di contenuto. Più specificamente, per la testa e le linee brevi, il "centro"Viene utilizzato lo stile di allineamento. Usando questo stile, l'aspetto del contenuto può essere migliorato e sembrerà pulito.

Questo articolo spiegherà vari metodi per centrare il testo in verticale. Quindi iniziamo!

Come centrare il testo in verticale in CSS?

Esistono molti modi per centrare il testo in verticale, come "Flexbox","altezza della linea","imbottitura","trasformare", e il "galleggiante" proprietà. In questa sezione, impareremo alcune delle proprietà menzionate per centrare il testo in verticale in CSS. Ma prima, mostreremo la procedura di allineamento centrale.

Esempio

Nell'HTML, creeremo un contenitore con classe denominata "centro"E al suo interno crea un'intestazione usando

etichetta:

"Agisci senza aspettative"

Successivamente, spostati nel file CSS e modellate il file HTML.

Qui ".centro"Viene utilizzato per accedere alla classe che abbiamo assegnato al . Successivamente, imposteremo la larghezza del contenitore creato su "450px"E l'altezza a"200px". Abbiamo anche impostato il bordo dell'uso del "confine"Proprietà e assegnare il valore del confine"10px" E "Doppio":

.Centro
larghezza: 450px;
Altezza: 200px;
Bordo: 7px doppio;

Dopo l'implementazione del codice sopra, otteniamo il seguente risultato:

Qui, vediamo che il testo è mostrato nell'angolo in alto a sinistra dello schermo. Ora, passiamo al passaggio successivo, in cui descriveremo diversi metodi per centrare il testo in verticale usando CSS.

Metodo 1: testo centrale in verticale in CSS usando Flex

CSS "flettere"È il valore di"Schermo" proprietà. Viene utilizzato per impostare contenuti o elementi in base alla dimensione della loro visione. Consente agli elementi CSS di organizzare in modo efficiente creando uguale spazio tra loro.

Sintassi

Visualizza: Flex

Quindi, continuiamo l'esempio precedente per centralizzare il testo in verticale.

Esempio

Per impostare la posizione del testo al centro e verticale, assegneremo il valore della proprietà come “flettere"E allinea elementi come"centro":

.Centro
larghezza: 450px;
Altezza: 200px;
Bordo: 7px doppio;
display: flex;
ALIGE-ITMS: CENTRO;

Questo ci darà il seguente risultato:

Qui, possiamo vedere che il nostro testo è allineato verticalmente e anche al centro del div. Ora passeremo al secondo metodo.

Metodo 2: testo centrale in verticale in CSS usando la proprietà della linea

IL "altezza della linea"La proprietà specifica l'altezza tra due righe all'interno degli elementi. Viene utilizzato per creare spazio tra due righe con testo.

Sintassi

La sintassi della proprietà della linea di linea è data come:

linea di linea: valore

Nella sintassi di cui sopra, specificheremo l'altezza della linea come "valore".

Nota: Nella proprietà della linea di linea, non possiamo dare un valore negativo.

Esempio

Ora utilizzeremo la proprietà di linea di linea per impostare il testo nel centro verticale del . Per fare ciò, nel file CSS, impostare il valore della proprietà della linea di linea su "150px":

.Centro
larghezza: 450px;
Altezza: 200px;
Bordo: 7px doppio;
linea di linea: 150px;

Questo ci darà il seguente risultato:

Metodo 3: testo centrale in verticale in CSS usando l'imbottitura

Per creare spazio tra il bordo di un elemento e il suo contenuto, il "imbottitura"La proprietà viene utilizzata. È una proprietà stentata di CSS che può essere utilizzata per impostare l'imbottitura da tutti i lati in una singola linea.

Sintassi

La sintassi della proprietà di imbottitura è:

imbottitura: in alto a destra in basso a sinistra

Ecco la descrizione dei valori di cui sopra della proprietà menzionata:

• superiore: Viene utilizzato per creare spazio dall'alto.
• Giusto: Viene utilizzato per creare spazio da destra.
• pulsante: Viene utilizzato per creare spazio dal fondo.
• Sinistra: Viene utilizzato per creare spazio da sinistra.

Nota: La specifica di due valori indicherà l'imbottitura dall'alto e in basso e l'imbottitura da sinistra e destra; Tuttavia, se viene aggiunto un valore, verrà applicato l'imbottitura a tutti e quattro i lati.

Esempio

Qui, imposteremo il valore dell'imbottitura come "10%" E "0%", Dove il primo valore indica l'imbottitura superiore e inferiore e il secondo indica l'imbottitura da sinistra e destra. Inoltre, vogliamo solo centralizzare il testo in verticale, quindi imposteremo il secondo valore su "0":

.Centro
Bordo: 7px doppio;
imbottitura: 10% 0;

Dopo l'implementazione del codice dato, vai al file HTML, eseguilo e controlla il seguente output:

Abbiamo fornito metodi diversi relativi al testo allineato al centro in verticale in CSS.

Conclusione

Per centrare il testo in verticale, usa il "Flexbox","altezza della linea" E "imbottitura"Proprietà di CSS. Queste proprietà consentono di impostare l'altezza all'interno del contenuto e del bordo degli elementi. In questo articolo, spieghiamo come centrare il testo in verticale usando tre diversi metodi e forniamo un esempio di ciascun metodo.