Come faccio a centrare verticalmente un testo in un div?

È un problema tipico. Prima o poi ci si troverà di fronte alla necessità di centrare verticalmente un testo all’interno di un div. Ecco come fare.

Ho un elemento div che contiene testo e voglio allineare il contenuto di questo div verticalmente al centro.
Riporto di seguito il codice HTML e il relativo stile CSS

<div id="box">
  Lorem ipsum dolor sit
</div>
#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

La soluzione

Come spesso avviene in informatica, esistono diverse soluzioni allo stesso problema. Centrare verticalmente un testo in un div non fa eccezione.
Noi qui ne vedremo alcune.

Utilizzo della proprietà line-height

La prima funziona con una sola riga di testo. Cioè se abbiamo un testo lungo più righe l’allineamento verticale non funziona con questo metodo. Si tratta di manipolare la proprietà CSS line-height. In pratica bisogna impostare allo stesso valore l’altezza del contenitore e l’altezza della linea di testo.

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Puoi vedere il risultato qui di seguito.

Utilizzo della proprietà inline-block

Quello che segue è un altro modo per allineare il testo verticalmente.
Questa soluzione funzionerà sia per una singola riga sia per più righe di testo, ma richiede un contenitore ad altezza fissa!

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Haec et tu ita posuisti, et verba vestra sunt. 
  Non enim iam stirpis bonum quaeret, sed animalis.</span>
</div>

Eccolo in azione.

Utilizzo della proprietà display:table

Infine possiamo utilizzare i CSS per simulare il comportamento di una tabella (poiché le tabelle supportano l’allineamento verticale). Il codice HTML è lo stesso del secondo esempio.

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Haec et tu ita posuisti, et verba vestra sunt. 
  Non enim iam stirpis bonum quaeret, sed animalis.</span>
</div>

Come sempre, possiamo vedere tutto in tempo reale qui di seguito.

Hai letto questi articoli?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *