Centrare verticalmente un elemento nel suo contenitore con i CSS è piuttosto problematico: non è possibile
infatti raggiungere in tutti i casi i risultati che si ottengono con le tabelle. A tal proposito, ricordo che
vertical-align può essere applicata alle celle di una tabella (assumendo proprio il ruolo dell’attributo
valign) oppure per allineare elementi (immagini ad esempio) rispetto alla linea di testo che occupano.
La centratura verticale con i CSS si può ottenere facilmente in uno di questi due casi:
- centrare un’unica linea di testo in un contenitore di altezza stabilita
- centrare un elemento di dimensione stabilita in un contenitore di dimensione stabilita
Nel primo caso useremo la proprietà line-height impostata al valore dell’altezza del contenitore:
div#box{height: 120px; line-height: 120px;background-color: #BFC6DE;
color: #40509B;font-family: “Trebuchet MS”, Arial, sans-serif}
Nel secondo caso, dovremo usare il posizionamento assoluto.