Ecco un'altra proprietà con cui mi sono scontrata spesso!
l'allineamento verticale di immagini!
Ne ho discusso molto, su vari forum, e da un utente è scaturita
una preziosa idea!
Non so quanto sia giusta, quanto sia pulito il codice di questa soluzione
sta di fatto che funziona ed è cross-browser. Da quel che ho capito la propriet� vertical-align serve per centrare
il testo rispetto ad una immagine.
Ma non riuscivo a trovare nessuna soluzione per centrare un'immagine
in un box.
Intendo nessuna soluzione alternativa alle tabelle
. Dopo faticose discussioni teoriche se fosse giusto
essere così razzisti nei confronti delle tabelle (qualcuno dice
che se usate per "intabellare" dati, quindi ad esempio creare griglie con immagini
è giusto utilizzare le tabelle), questo fantastico utente di forum
ha partorito l'idea che per il momento ho applicato per le mie soluzioni!
Il codice ? questo: .box {
height:131px;
width:131px;
background-color:#F5F5F5;
text-align: center;
float:left;
background-repeat: no-repeat;
background-position: 50% 50%;
}




In pratica definiamo nel css il nostro box, il contenitore che dovr&agrve; avere all'interno le immagini.
Nel definirlo mettiamo la proprietà background che sarà quella che ci permetterà di centrare le immagini.
In pratica, continuando poi con l'html, noi definiamo l'immagine come sfondo
del box, e non come elemento contenuto nel box
. In questo modo, dando coordinate 50% e 50% l'immagine viene visualizzata
correttamente da tutti i browser.

In realtà avevo pensato ad una soluzione simile, ma forse più
complicata. Cioè tramite php calcolare le dimensioni dell'immagine
e poi definire lo stile dinamicamente, dando quindi la proprietà top volta per volta.
Proverò anche questa prossimamente! Ciao!