È 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.