Guida HTML interattiva: Centrare il testo

Q: Come centro il testo in HTML?

Aggiungi text-align: center all'elemento che contiene il testo, per esempio o una regola CSS come h1 { text-align: center; }. Centra ogni riga di testo e ogni contenuto inline dentro quell'elemento.

Q: Come centro il testo in verticale?

Trasforma il contenitore in un flex box: display: flex; align-items: center; (aggiungi justify-content: center per centrare anche in orizzontale). Per una sola riga in un riquadro di altezza fissa funziona anche un line-height uguale all'altezza.

Q: Il tag è ancora valido?

No. e l'attributo align="center" sono obsoleti. I browser li mostrano ancora per le pagine vecchie, ma il codice nuovo deve usare text-align: center nel CSS.

Q: Come faccio rientrare il testo in HTML?

Usa il CSS. text-indent: 2em fa rientrare la prima riga di un paragrafo, e padding-inline-start: 2em o margin-inline-start: 2em fanno rientrare tutto il blocco. Spazi o nel testo non sono un rientro affidabile.

Come centrare il testo in HTML

Usa la proprietà CSS text-align: center sull'elemento che contiene il testo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align centra ogni riga dentro l'elemento, compresi gli elementi inline come link, immagini e pulsanti. Viene ereditata, quindi impostarla su un contenitore centra il testo di tutto quello che contiene.

Mettila sul blocco, non sullo span

text-align funziona sui contenitori a blocco: <p>, <div>, titoli, celle di tabella. Su uno <span> o un <a> non fa nulla, perché un elemento inline è largo solo quanto il suo testo e non c'è spazio in cui centrarlo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

La soluzione è sempre la stessa: sposta text-align: center sul blocco genitore.

Blocco al centro, righe allineate all'inizio

Per un paragrafo di più righe, il testo tutto centrato è difficile da leggere perché ogni riga inizia in un punto diverso. Uno schema comune è centrare il blocco nella pagina e tenere il testo allineato all'inizio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto centra un blocco che ha una larghezza, text-align centra le righe al suo interno. Centrare i riquadri (con flexbox, grid o margini) è spiegato nella pagina su come centrare un div.

Centrare il testo in verticale

text-align funziona solo in orizzontale. Per centrare il testo in verticale dentro un riquadro, trasforma il riquadro in un contenitore flex:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center centra in verticale, justify-content: center centra in orizzontale, e text-align: center continua a centrare le righe tra loro quando sono più di una. Il trucco del line-height funziona solo per una riga di testo in un riquadro di altezza nota.

Tutti i valori di text-align

Valore	Risultato
`start` (predefinito)	Le righe iniziano dal bordo iniziale: a sinistra in italiano, a destra in arabo ed ebraico
`end`	Le righe finiscono sul bordo finale
`center`	Righe centrate
`justify`	Righe allungate fino a toccare entrambi i bordi (tranne l'ultima)
`left`, `right`	Sempre a sinistra o sempre a destra, qualunque sia la lingua

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

Preferisci start e end a left e right: si invertono da soli per le lingue scritte da destra a sinistra, come mostra l'ultimo riquadro.

Il vecchio tag center

Le pagine vecchie centrano il testo con <center> o con un attributo align:

<center>Old way</center>
<p align="center">Also old</p>

Entrambi sono obsoleti. I browser li mostrano ancora perché i vecchi siti non si rompano, ma non sono validi nell'HTML attuale e mescolano l'impaginazione al markup. Usa text-align: center nel CSS.

Far rientrare il testo

L'HTML non ha un tag per il rientro, e gli spazi digitati si comprimono (vedi spazi in HTML). I rientri si fanno con il CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

Rientro	CSS
Solo la prima riga	`text-indent: 2em`
Tutto il blocco	`padding-inline-start: 2em` o `margin-inline-start: 2em`
Sporgente (prima riga fuori)	`padding-inline-start: 2em; text-indent: -2em`

em lega il rientro alla dimensione del font, quindi cresce insieme al testo.

Errori comuni

text-align su un elemento inline. Mettilo sul blocco genitore.
Aspettarsi che text-align centri un riquadro. Centra il testo e il contenuto inline, non un blocco con una larghezza. Per i riquadri usa margin-inline: auto o flexbox.
Usare <center> o align="center". Obsoleti. Usa il CSS.
Centrare paragrafi lunghi. Centra titoli e righe brevi; tieni il testo del corpo allineato all'inizio.
Fare rientri con   o spazi. Usa text-indent o il padding.

Domande frequenti

Come centro il testo in HTML?

Aggiungi text-align: center all'elemento che contiene il testo, per esempio <p style="text-align: center"> o una regola CSS come h1 { text-align: center; }. Centra ogni riga di testo e ogni contenuto inline dentro quell'elemento.

Perché text-align: center non funziona sul mio span?

Uno span è inline, quindi è largo solo quanto il suo testo e non c'è spazio in cui centrarlo. Metti text-align: center sul blocco genitore (il <p> o il <div> che lo contiene), oppure rendi lo span display: block.

Come centro il testo in verticale?

Trasforma il contenitore in un flex box: display: flex; align-items: center; (aggiungi justify-content: center per centrare anche in orizzontale). Per una sola riga in un riquadro di altezza fissa funziona anche un line-height uguale all'altezza.

Il tag <center> è ancora valido?

No. <center> e l'attributo align="center" sono obsoleti. I browser li mostrano ancora per le pagine vecchie, ma il codice nuovo deve usare text-align: center nel CSS.

Come faccio rientrare il testo in HTML?

Usa il CSS. text-indent: 2em fa rientrare la prima riga di un paragrafo, e padding-inline-start: 2em o margin-inline-start: 2em fanno rientrare tutto il blocco. Spazi o   nel testo non sono un rientro affidabile.

Concetti correlati