ZANETTE
MARCO
CSS
Allineamento verticale centrato div
Come centrare verticalmente del testo nei div senza altezza fissa?
Sicuramente vi sarà capitato di imbattervi in questo problema apparentemente senza soluzioni; in quanto nel caso di un div contenitore
con altezza fissa è molto semplice centrare verticalmente al suo interno un elemento attraverso la proprietà position (relative per il
contenitore e absolute per l'elemento centrato); in questo articolo vi spiegherò invece come otternere questa disposizione con un
contenitore di altezza non definita attraverso la proprietà css vertical-align:middle.
Riporto sotto esempio e codice.
numero 1
testo di prova
testo di prova
testo di prova
- <div style="display:table;height:auto; width:300px;background-color:#F00;">
- <div style="display:table-cell;vertical-align:middle;background-color:#F00;">
- Cella numero 1
- </div>
- <div style="display:table-cell;vertical-align:middle;background-color:#FF0;">
- testo di prova
- testo di prova
- testo di prova
- testo di prova
- </div>
- </div>
In questo esempio ho creato un div contenitore con altezza non definita, e all'interno 2 celle di testo.
Entrambe hanno la proprietà vertical-align:middle infatti il testo si allinea verticalmente al centro.
Riporto un'altro esempio ora con un div contenitore di altezza conosciuta.
- <div style="display:table; height:auto; width:150px; background-color:#F00; height:150px;">
- <div style="display:table-cell; vertical-align:middle; background-color:#F00;">
- testo centrato verticalmente
- </div>
- </div>
In questo esempio invece ho creato un div con altezza definita e all'interno una cella con la proprietà vertical-align:middle
per far allineare verticalmente al centro il testo contenuto.
Come avete visto in entrambi gli esempi con le proprietà display:table e display:table-cell i div
hanno un comportamento molto simile a quello di una tabella e le celle contenute; infatti il div con la proprietà display:table-cell
viene a espandersi come fa una cella dentro la tabella ed assegnandoli anche la proprietà vertical-align:midddle
il testo al suo interno si centrerà verticalmente.