Gli articoli teorici sui CSS sono molto utili a chi vi si è avvicinato da poco, soprattutto se approfonditi, accompagnati da screenshot ed esempi, perchè sono spesso più assimilabili delle specifiche W3C. àˆ il caso di Vertical-Align Misuse, un articolo decisamente sfizioso su una proprietà poco conosciuta e usata spesso in maniera inadeguata: il vertical-align. Per chi ha difficoltà con l'inglese, ho ripescato un piccolo estratto sul tema da questo articolo di PRO che contiene le due informazioni indispensabili su questa proprietà .
Se siete abituati alle tabelle e all'uso dell'attributo
valign, troverete che i CSS nel centrare verticalmente elementi generici sono un po' carenti. A questo proposito, ricordo che la proprietà CSSvertical-alignassume un duplice ruolo:
- Centrare verticalmente il contenuto di una cella di tabella, proprio come valign
- Allineare immagini ed elementi inline rispetto alla riga di testo che occupano
Se applicata in altri casi, non ha effetto.
Pensavo che in realtà una piccola eccezione c'è, peccato che non sia cross-browser.
Se dichiariamo un elemento con display:table-cell possiamo applicare la proprietà
vertical-align come se fosse la cella di una tabella. Ho preparato un piccolo
esempio, composto da un'unica regola CSS:
div#box{display: table-cell;width: 200px;height: 300px;
vertical-align: middle;text-align: center;
background: #D9FFCB;border: 1px solid #88D86B}
Il risultato sperato si ottiene su Opera, Firefox e credo anche su Safari, niente da fare invece per Internet Explorer fino alla versione 6. Per concludere una piccola nota: la tecnica dell'esempio appena visto non è applicabile direttamente ad elementi float o posizionabili assolutamente. Il motivo? Elementi float o posizionati vengono resi di default block-level, quindi la dichiarazione display:table-cell verrebbe ignorata.
