Ho un elemento div che contiene testo, e voglio allineare il contenuto di questo div verticalmente al centro.
Ecco il mio stile div:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Qual è il modo migliore per farlo?
Potete provare questo approccio di base:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Funziona solo per una singola linea di testo però, perché abbiamo impostato l'altezza della linea alla stessa altezza dell'elemento box che la contiene.
Questo è un altro modo per allineare il testo verticalmente. Questa soluzione funzionerà per una singola riga e per più righe di testo, ma richiede ancora 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>
Il CSS dimensiona semplicemente il <div>
, allinea verticalmente al centro il <span>
impostando il <div>
'line-height uguale alla sua altezza, e rende il <span>
un blocco in linea con vertical-align: middle
. Poi imposta la line-height di nuovo al normale per il <span>
, così il suo contenuto scorrerà naturalmente all'interno del blocco.
Ed ecco un'altra opzione, che potrebbe non funzionare sui vecchi browser che non supportano display: table
e display: table-cell
(praticamente solo Internet Explorer 7). Usando i CSS simuliamo il comportamento della tabella (dato che le tabelle supportano l'allineamento verticale), e l'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.</span>
</div>
Questa tecnica usa un elemento posizionato in modo assoluto impostando top, bottom, left e right a 0. È descritta più in dettaglio in un articolo di Smashing Magazine, Absolute Horizontal And Vertical Centering In CSS.
Puoi farlo facilmente aggiungendo il seguente pezzo di codice CSS:
display: table-cell;
vertical-align: middle;
Questo significa che il tuo CSS alla fine appare come:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
Per una singola linea di testo (o un singolo carattere) si può usare questa tecnica:
Può essere usata quando #box
ha un'altezza non fissa, relativa in %**.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Vedi una demo dal vivo su JsBin (più facile da modificare il CSS) o [JsFiddle][2] (più facile da cambiare l'altezza del frame del risultato).
Se vuoi mettere il testo interno in HTML, non in CSS, allora devi avvolgere il contenuto del testo in un elemento aggiuntivo inline e modificare #box::after
per farlo corrispondere. (E, naturalmente, la proprietà content:
dovrebbe essere rimossa).
Per esempio,
<div id="box"><span>TextContent</span></div>
.
In questo caso, #box::after
dovrebbe essere sostituito con #box span
.
Per il supporto di Internet Explorer 8 devi sostituire ::
con :
.