Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Allineamento verticale con i CSS

Conosciamo la proprietà vertical-align da vicino.
Conosciamo la proprietà vertical-align da vicino.
Link copiato negli appunti

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à  CSS vertical-align assume 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.

Ti consigliamo anche