centratura verticale img in un div

[Miki73]

mi stavo chiedendo come era possibile centrare un'immagine in un blocco div (in Firefox); ho provato con height/line-height, vertical-align, ma nulla! E' sempre posizionata in alto l'immagine!

  div {
    width: 525px;
    height: 201px;
    line-height: 201px;
    background: #036;
    text-align: center;
  }
  a { display: block; background: #369; }
  img { vertical-align: middle; background: #69c; }

    <div>
      <a href="#">
        [img]images/immagine.GIF[/img]
      </a>
    </div>

[Mich_]

vertical-align serve per allineare gli oggetti contenuti, non per allineare un blocco all'interno di un altro.
Quindi se lo vuoi usare lo devi scrivere dentro il tuo div.

Se non funziona (non so quanto sia interpretato correttamente dai browser), prova con margin: auto; (che va inserito nel CSS dell'oggetto da centrare (che deve avere display: block;)

[Miki73]

vertical-align serve per allineare verticalmente oggetti di tipo inline, purtroppo con le immagini è un po' difficile, visto che non sono propriamente oggetti inline anche se hanno molte caratteristiche simili!
margin: auto serve a poco in questo caso, visto che la sua maggiore utilità riguarda la centratura orizzontale di elementi di tipo blocco.

[pierofix]

E provare con una soluzione estrema?

<div>
   <img />
</div>

div
{
   width:400px; height:400px;
   margin:0; padding:0;
   position:relative;
}
div img
{
   width:200px; height:100px;
   position:absolute; top:50%; left:50%;
   margin-top:-50px; margin-left:-100px;
}

[Miki73]

ho cercato oltre che nei libri anche nei vari forum e credo proprio che questa sia l'unica soluzione purtroppo! Grazie piero