Come posso centrare il testo all'interno di un div

Durante la progettazione di pagine Web, gli sviluppatori possono aggiungere vari componenti, tra cui immagini, testo, tabelle e altri. Inoltre, il testo può essere allineato al centro in un div usando più proprietà CSS. Il metodo più popolare per il testo centrata in orizzontale è utilizzare il "allineamento"Attributo. Inoltre, puoi anche usare "altezza della linea" E "allineamento verticale"Attributi per allineare verticalmente il testo.

Questo post indicherà il metodo per centrare il testo in verticale e orizzontalmente all'interno di un div.:

Come centrare il testo in orizzontale all'interno di un div?

Per centrare il testo in orizzontale all'interno di un div, controlla la procedura data.

Passaggio 1: crea un contenitore div

Inizialmente, crea un contenitore div con l'aiuto di ""Elemento. Quindi, inserire un “id"Attributo all'interno del tag di apertura DIV. Successivamente, incorporare un po 'di testo tra il tag DIV:

Linuxhint è uno dei migliori siti Web per la creazione di contenuti.

Produzione

Passaggio 2: accedere al contenitore div al centro allinea

Ora, accedi al contenitore Div con l'aiuto di "id"Nome attributo con selettore"#"E applica le seguenti proprietà CSS:

#align-content
larghezza: 80%;
Margine: 0 Auto;
imbottitura: 20px;
Background: #c8edf3;
Testo-align: centro;
Colore: RGB (49, 15, 240);

Qui:

• • "larghezza"La proprietà viene utilizzata per l'impostazione della dimensione della larghezza del contenitore.
  • "margine"Specifica uno spazio vuoto al di fuori del contenitore.
  • "imbottitura"Definisce uno spazio all'interno del confine dell'elemento.
  • "sfondo"Imposta il colore di sfondo sul lato posteriore dell'elemento.
  • "allineamento"La proprietà viene utilizzata per l'impostazione dell'allineamento del testo come"centro".
  • "colore"Specifica un colore per il testo all'interno del confine.

Si può osservare che abbiamo allineato con successo il testo allineato orizzontalmente all'interno del div creato:

Come centrare il testo in verticale all'interno di un div?

Per centrare il testo in verticale all'interno di un contenitore Div, seguire le istruzioni fornite.

Passaggio 1: accedere al contenitore Div

Prima di tutto, accedi al contenitore Div creato.

Passaggio 2: applicare le proprietà CSS sul testo centrale in verticale

Quindi, applica le proprietà CSS elencate di seguito al testo centrale in verticale in un div:

#align-content
Visualizza: cellula da tavola;
larghezza: 300px;
Altezza: 150px;
imbottitura: 10px;
colore blu;
Background-color: RGB (248, 215, 166);
Bordo: 3px Dasched #F09D03;
allineamento verticale: medio;

Secondo lo snippet di codice sopra:

• • Impostare il "Schermo"Ciò specifica il comportamento di visualizzazione dell'elemento come"cella da tavola", Il che significa che si comporta come la cella della tabella nell'elemento Div.
  • "larghezza"La proprietà specifica la dimensione della larghezza dell'elemento.
  • "altezza"Imposta l'altezza dell'elemento.
  • "imbottitura"Definisce uno spazio vuoto all'interno dell'elemento.
  • "colore"È utilizzato per impostare il colore del testo all'interno dell'elemento.
  • "colore di sfondo"Specifica il colore del retro dell'elemento.
  • "confine"La proprietà definisce un limite su un elemento.
  • "allineamento verticale"La proprietà viene utilizzata per l'impostazione dell'allineamento verticale di un elemento definito in"mezzo".

Produzione

Hai appreso la procedura completa per centrare il testo all'interno del contenitore in entrambi i modi, in verticale e orizzontale.

Conclusione

Per centrare il testo in verticale e orizzontale all'interno di un div, prima, crea un contenitore di div con l'aiuto di elemento e accedilo utilizzando il selettore. Quindi, applica le proprietà CSS in cui le "allineamento"La proprietà è utilizzata per l'allineamento orizzontale e"allineamento verticale"Imposta l'allineamento verticale. Questo post ha dimostrato i metodi per centrare il testo in verticale e orizzontalmente all'interno di un div.