Avevamo visto in precedenza come centrare un elemento con dimesioni fisse verticalmente e orizzontalmente e prima ancora avevamo centrato orizzontalmente un div nella pagina.
Vediamo stavolta come si può centrare verticalmente un elemento di cui non si conosce l’altezza. La cosa è realizzabile solo se l’elemento genitore (che conterrà il box da centrare) avrà un’altezza fissa; inoltre dovrà essere dichiarato come “tabellare“.
Vediamo il codice Css così chiariamo meglio:
#padre { height:300px; /* elemento contenitore con altezza fissa */ display:table; /* elemento contenitore visualizzato come tabella */ } #figlio_centrato { display:table-cell; /* elemento visualizzato come cella di tabella*/ vertical-align:middle; /* centro verticalmente */ }
A questo punto basta applicare il codice Css qui sopra a una struttura (x)html normalissima. Ci bastano un paio di Div.
<div id="padre”> <div id="figlio_centrato"> <p>Un po' di contenuto</p> </div> </div>
Nota: vertical-align ha validità quando si applica a una cella di una tabella (col display: table-cell); questo potrebbe servire specialmente quando il contenuto del sito è dinamico (dati reperiti da un database)
Attenzione! Questo metodo (un classico!!) non funziona su IE6 e IE7.
Come fare ad adattare il tutto?
Si può usare a nostro vantaggio un errore di interpretazione dei Css “top” assegnandogli un valore negativo in percentuale, dato che questo non dovrebbe essere preso in considerazione dalle specifiche.
Vediamolo in dettaglio:
#padre { height:300px; /* vedi sopra */ position:relative; /* voglio poter posizionare in modo assoluto ciò che starà al suo interno */ } #sotto_padre{ position:absolute; /* sotto elemento posizionato in modo assoluto in rapporto al div padre */ top:50%; /* il bordo superiore sarà al 50% dell’altezza disponibile */ } #figlio_centrato { position:relative; /* elemento da centrare in rapporto al div sotto_padre */ top:-50%; /* bordo superiore va ad alzarsi del 50% dell’altezza*/ }
Vediamolo col nuovo codice (x)html…
<div id="padre"> <div id="sotto_padre"> <div id="figlio_centrato"> <p>Un po' di contenuto</p> </div> </div> </div>
Quindi adesso dovrebbe andare bene sui vari browser.
Con un po’ di fantasia e a seconda del tipo di struttura che stiamo creando possiamo definire l’altezza del div “padre” al 100% e ridefinire anche Body e Html al 100%. In questo modo otterremo un risultato a pagina piena.
Bye…