ghisirds ha scritto:
Salve a tutti.
Sto creando una galleria di immagini in un sito ma dopo vari e vani tentativi, non mi è ancora riuscito di allineare verticalmente delle immagini di altezza variabile in un div di altezza fissa.
Ho inserito tutte le immagini in div e a questi ho applicato una classe di cui riporto il codice:
.galleria { float: left; text-align: center; height: 150px; width: 150px; }
Così facendo ho tutte le immagini centrate in orizzontale ma in verticale rimangono allineate in alto.
Qual è quindi la soluzione più semplice e immediata nonché compatibile con tutti i browser per allinearle anche verticalmente ma senza l'utilizzo di tabelle?
Un grazie anticipato per ogni eventuale suggerimento.
Beh la soluzione più diretta che verrebbe da consigliare sarebbe l'utilizzo di tabelle, le quali centrano verticalmente il contenuto... ma io per primo mi discosto dal layout tabellare, perciò proverò a dire la mia in XHTML Strict:
Una soluzione potrebbe essere l'utilizzo di DIV annidati e delle dichiarazioni CSS pseudo-tabellari:
div.tabella {
display: table;
width: 100%;
text-align: center;
}
div.tabella div.cella {
display: table-cell;
vertical-align: center;
}
Ma non mi pare sia incredibilmente cross-browser (credo faccia le bizze con browser poco aggiornati...) altrimenti ci sarebbero i "trucchi" CSS di posizionamento con margini negativi, ma questo presuppone di conoscere l'altezza esatta di
ogni immagine, il che potrebbe non essere fattibile...
Dimmi se ti può interessare la seconda, in tal caso potrei postarti del codice di esempio; altrimenti personalmente non saprei cosa consigliarti, se non pensare ad una grafica che non richieda l'allineamento verticale
Ciao!