Proprietà CSS text-align

La proprietà CSS text-align imposta l'allineamento orizzontale del contenuto inline all'interno di un contenitore a blocchi. In termini semplici, controlla come il testo (e gli elementi inline come <a>, <img> o <span>) si posiziona all'interno del box padre: spinto verso il bordo sinistro, il bordo destro, centrato o allungato per riempire la riga.

Questa pagina tratta la sintassi, ogni valore con il suo effetto, esempi eseguibili, insidie comuni e le differenze tra text-align e il centraggio di un blocco.

Perché text-align non equivale a centrare un box

Una fonte di confusione frequente: text-align: center centra il contenuto all'interno di un blocco, non il blocco all'interno del suo genitore. La proprietà allinea il contenuto inline rispetto al blocco che lo contiene — non sposta il blocco stesso rispetto all'elemento contenitore o al viewport.

Per centrare orizzontalmente un elemento a livello di blocco (come un <div> a larghezza fissa), occorre assegnargli una larghezza e usare margini orizzontali automatici — vedi la proprietà margin. Usa text-align quando vuoi posizionare il testo all'interno di un elemento; usa margin: 0 auto quando vuoi posizionare l'elemento stesso.

Informazione

L'allineamento specificato con text-align non è relativo al blocco contenitore o al viewport — posiziona il contenuto inline all'interno del proprio blocco.

Valore iniziale	left se la direzione è "ltr", right se la direzione è "rtl"
Si applica a	Contenitori a blocchi.
Ereditato	Sì
Animabile	No.
Versione	CSS1
Sintassi DOM	object.style.textAlign = "right";

Sintassi

Sintassi della proprietà CSS text-align

text-align: left | right | center | justify | initial | inherit;

Esempio della proprietà text-align con i valori "right" e "center":

Esempio della proprietà CSS text-align con i valori right e center

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: right;
      }
      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <div>Example for the text-align property.</div>
    <p>Some paragraph for example.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà text-align con i valori "center", "left" e "justify":

Esempio della proprietà CSS text-align con i valori left, center e justify

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        text-align: center;
      }
      p.date {
        text-align: left;
      }
      p.example {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h2>Text-align property example</h2>
    <p class="date">March, 2019</p>
    <p class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>

Provalo tu stesso »

Con justify, ogni riga tranne l'ultima viene allungata in modo che i bordi sinistro e destro coincidano con i bordi del box; il browser aggiunge spazio extra tra le parole per ottenere questo effetto. Per questo motivo justify ha un aspetto migliore su paragrafi ampi e su più righe, mentre può creare spazi fastidiosi su colonne strette.

Valori

La proprietà text-align accetta i seguenti valori:

Valore	Descrizione	Prova
left	Allinea il testo a sinistra. Questo è il valore predefinito della proprietà.	Prova »
right	Allinea il testo a destra.	Prova »
center	Allinea il testo al centro.	Prova »
justify	Estende le righe in modo che ciascuna abbia la stessa larghezza.	Prova »
initial	Imposta il valore predefinito della proprietà.	Prova »
inherit	Eredita la proprietà dall'elemento genitore.

Note e insidie comuni

Agisce solo sul contenuto inline. text-align non ha effetto su un elemento figlio a livello di blocco che non sia inline. Per posizionare orizzontalmente un blocco, assegnagli una larghezza e usa margin: 0 auto, oppure utilizza un layout flex/grid.
È ereditata. Poiché la proprietà è ereditata, impostare text-align: center su <body> si propaga a tutti i discendenti fino a quando qualcosa non la sovrascrive. Impostala sull'elemento più specifico possibile per evitare sorprese.
Rispetta la direzione di scrittura. Il valore iniziale dipende da direction: left per il testo da sinistra a destra (ltr) e right per il testo da destra a sinistra (rtl). I valori logici start ed end si mappano rispettivamente all'inizio e alla fine della riga indipendentemente dalla direzione.
Centrare le immagini. Poiché <img> è un elemento inline, text-align: center sul blocco genitore centrerà anche l'immagine — comodo per centrare rapidamente un'immagine senza Flexbox.
justify e l'ultima riga. justify non allunga mai l'ultima riga di un paragrafo; quella riga mantiene l'allineamento iniziale naturale. Controllala separatamente con text-align-last.

Proprietà correlate

text-align-last — allinea l'ultima riga di un blocco giustificato.
text-indent — rientra la prima riga del testo.
text-justify — regola con precisione come justify distribuisce lo spazio.
direction — imposta la direzione del testo, che determina l'allineamento predefinito.
vertical-align — allinea il contenuto inline verticalmente (asse perpendicolare).

Esercitazione

Pratica

Quali dei seguenti sono valori validi per la proprietà 'text-align' in CSS?