Proprietà CSS vertical-align

La proprietà vertical-align imposta l'allineamento verticale di un box inline, inline-block o table-cell. Gli elementi a livello inline includono immagini, testo, pulsanti e qualsiasi elemento con display: inline o display: inline-block.

Questa pagina spiega dove vertical-align si applica effettivamente, il modello del line-box che rende comprensibili i suoi valori, ogni parola chiave e il suo comportamento, oltre agli errori più comuni in cui le persone incappano.

Dove funziona vertical-align

La proprietà produce effetto solo in due situazioni:

All'interno di un line box — per allineare un box inline o inline-block rispetto alla riga di testo su cui si trova. Ad esempio, allineare un'icona <img> al testo circostante.
All'interno di celle di tabella — per allineare il contenuto di un <td>, <th>, o qualsiasi elemento con display: table-cell.

Al di fuori di questi contesti viene silenziosamente ignorata.

Cosa NON fa

Questa è la fonte di confusione più comune: vertical-align non centra elementi a livello block. Impostare vertical-align: middle su un <div> non ha alcun effetto. Per centrare un normale blocco, usa Flexbox (align-items: center), Grid, oppure margin: 0 auto (solo orizzontale). La parola chiave middle, nonostante il nome, centra un box inline rispetto al testo circostante — non un blocco all'interno del suo genitore.

Valore iniziale	baseline
Si applica a	Elementi a livello inline e table-cell, si applica anche a ::first-letter e ::first-line.
Ereditato	No.
Animabile	No.
Versione	CSS1
Sintassi DOM	object.style.verticalAlign = "middle";

Come funziona vertical-align

Per usare bene questa proprietà è utile avere un modello mentale rapido.

Ogni riga di testo viene disposta all'interno di un line box invisibile. All'interno di quel line box esistono due linee di riferimento importanti:

La baseline — la linea su cui poggiano i bordi inferiori della maggior parte delle lettere (lettere come "g" e "y" scendono al di sotto di essa).
L'area di contenuto — l'em-box completo del font, approssimativamente dalla sommità del glifo più alto al fondo del discendente più basso.

La maggior parte delle parole chiave di vertical-align sposta un box rispetto a una di queste linee (baseline, text-top, text-bottom, middle), mentre top e bottom allineano ai bordi dell'intero line box.

In una cella di tabella le regole sono più semplici: vertical-align controlla dove il contenuto della cella si posiziona all'interno dell'altezza della cella, e solo top, middle, bottom e baseline sono significativi.

Sintassi

Sintassi della proprietà CSS vertical-align

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

Esempio della proprietà vertical-align con il valore "sub":

Esempio della proprietà CSS vertical-align con il valore sub

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: sub;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Provalo tu stesso »

Risultato

Esempio della proprietà vertical-align con il valore "middle":

Esempio della proprietà CSS vertical-align con il valore middle

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà vertical-align con il valore "super":

Esempio della proprietà CSS vertical-align con il valore super

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Provalo tu stesso »

Esempio della proprietà vertical-align con i valori "top" e "bottom":

Esempio della proprietà CSS vertical-align con i valori top e bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      td {
        height: 100px;
      }
      .top {
        vertical-align: top;
      }
      .bottom {
        vertical-align: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <table>
      <tr>
        <th>Bottom</th>
        <th>Middle</th>
        <th>Top</th>
      </tr>
      <tr>
        <td class="bottom">Some text</td>
        <td>Some text</td>
        <td class="top">Some text</td>
      </tr>
    </table>
  </body>
</html>

Provalo tu stesso »

Esempio con un valore di lunghezza (allineamento di un'icona al testo)

Un valore di lunghezza sposta il box verso l'alto (valore positivo) o verso il basso (valore negativo) rispetto alla baseline. Questo è il modo più pulito per allineare un'immagine o un'icona inline al testo accanto a essa:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .label {
        font-size: 20px;
      }
      .icon {
        width: 18px;
        height: 18px;
        vertical-align: -3px; /* drop it 3px to sit on the text */
      }
    </style>
  </head>
  <body>
    <p class="label">
      <img class="icon" src="https://api.w3docs.com/uploads/media/default/0001/03/4624f58ca574eae0a734eb0d43fd87bc2326a306.png" alt="icon">
      Aligned with the text baseline
    </p>
  </body>
</html>

Problemi comuni

Il "misterioso spazio" sotto un'immagine. Un <img> autonomo all'interno di un blocco ha spesso qualche pixel di spazio sotto di sé. Questo accade perché, come elemento inline, l'immagine si posiziona sulla baseline del testo, lasciando spazio per i discendenti. Si risolve con vertical-align: bottom (o middle/top), oppure impostando l'immagine come display: block.
middle non è un vero centraggio. vertical-align: middle allinea il box alla baseline più metà dell'x-height del genitore — visivamente vicino al centro per icone piccole, ma non esatto, e non ha alcun effetto sugli elementi block.
Non viene ereditato. Ogni box deve dichiarare il proprio vertical-align; impostarlo su un genitore non ha effetto sui figli.
top/bottom dipendono dal contenuto più alto. Si allineano al line box, quindi un singolo elemento alto sulla riga può cambiare la posizione di tutto il resto.
I valori di length negativi sono consentiti e sono spesso più prevedibili delle parole chiave per un allineamento preciso al pixel delle icone.

Valori

Valore	Descrizione	Prova
baseline	Allinea la baseline dell'elemento con la baseline del suo genitore. Questo è il valore predefinito.	Prova »
length	Sposta la baseline del box verso l'alto (valore positivo) o verso il basso (valore negativo) rispetto alla baseline del genitore.	Prova »
sub	Abbassa la baseline del box nella posizione corretta per i pedici del box genitore.	Prova »
super	Alza la baseline del box nella posizione corretta per gli apici del box genitore.	Prova »
top	Allinea la sommità del sottoalbero allineato con la sommità del line box.	Prova »
text-top	Allinea la sommità del box con la sommità dell'area di contenuto del genitore.	Prova »
middle	Allinea il punto medio verticale del box con la baseline del box genitore più metà dell'x-height del genitore.	Prova »
bottom	Allinea il fondo del sottoalbero allineato con il fondo del line box.	Prova »
text-bottom	Allinea il fondo del box con il fondo dell'area di contenuto del genitore.	Prova »
initial	Imposta la proprietà al suo valore predefinito.	Prova »
inherit	Eredita la proprietà dall'elemento genitore.

Esercitazione

Pratica

Cosa fa la proprietà CSS 'vertical-align'?

Regola il posizionamento verticale di un elemento rispetto al suo box inline o table-cell.Riallinea il contenuto di un elemento in orizzontale.Si applica agli elementi a livello inline e 'table-cell'.Regola la dimensione dell'elemento.

Proprietà correlate

text-align — allineamento orizzontale del contenuto inline.
line-height — imposta l'altezza del line box rispetto alla quale si allineano top/bottom.
display — passa tra inline, inline-block, block e table-cell.