centrare unìimmagine dentro al div ..

[JANUS70]

Ciao ..
a fronte di un 'div' con dimensioni fisse, dovrei "centrarci" all'interno delle immagini (in modo dinamico), tutte con misure diverse (chiaramente più piccole del 'div')
in orizzontale risolvo con "text-align: center" .. il problema ce l'ho in verticale dove ho provato a calcolare di volta in volta il 'padding' .. ma con risultati deludenti !

[Prill]

Fra le soluzioni possibili con i css:

1. usare per il div un line-height eguale alla sua altezza (ma il funzionamento di questo metodo è non proprio ottimale con le immagini, ho inserito uno spazio vuoto perché Firefox, Chrome, Opera e Safari allineino l'immagine, dovrebbe essere così anche per Explorer dalla versione 7 in poi, ma non ho testato)

#centra {
	height: 400px;
	line-height: 400px; 
	text-align:center;
	background:pink;
}
#centra img{
       vertical-align:middle;
}

...

   <div id="centra">
     &amp;nbsp;[img]miaImmagine.jpg[/img]
   </div>

2. usare le proprietà display:table e display:table-cell aggiungendo però codice di marcatura in più e un css apposito per vecchie versioni di Explorer

<style type="text/css">
#esterno{
display:table;
width:400px;
height:400px;
vertical-align:middle;
overflow: hidden;
background:yellow
}
#boxContenuto {
display:table-cell;
width:100%;
vertical-align:middle;
}


</style>

<!--[if lt IE 8]>
<style type="text/css">
#esterno{
position:relative;
}
#boxContenuto{top:50%;position:absolute;}
#contenuto{top:-50%;position:relative;}
</style>
<![endif]-->

...

<div id="esterno">
 <div id="boxContenuto">
   <div id="contenuto">
     [img]miaImmagine.jpg[/img]
   </div>
 </div>
</div>

Altrimenti potrai ricorrere a javascript

[JANUS70]

grazie mille !

[JANUS70]

non c'è proprio rimedio per non avere uno spazio in più sopra l'immagine ?

[ResianTaxidrive]

col secondo sistema non c'è lo spazio sopra l'immagine.

[JANUS70]

sono proprio un idiota ..
leggendo in fretta non avevo ben colto il secondo esempio.
grazie