Img al centro di un DIV

[waitec401]

Ho creato questo DIV

div#foto{
height: 291px;
background-color:#ffffff;

}

ora vorrei inserrire una foto al centro ma non riesco

<div id="foto"> [img]img_template/foto_prima.jpg[/img]
</div>

[Mich_]

Un'immagine in un tag <img> e` un oggetto di tipo inline, quindi ti basta:

div#foto{
  height: 291px;
  background-color:#ccc;   /* grigetto per le prove */
  width: ...;             /* la larghezza va specificata */
  text-align: center;
}

Pero` la larghezza del blocco va specificata, altrimenti diventa: "il piu` stretto possibile" e non vedi la centratura.

[waitec401]

ora è al centro ma non verticlamente..

[Mich_]

Quello non lo avevo capito.
Per centrare un elemento inline, di solito di definisce l'altezza della riga uguale all'altezza del blocco.
Nel tuo caso sarebbe:

div#foto{
  height: 291px;
  background-color:#ccc;   /* grigetto per le prove */
  width: ...;             /* la larghezza va specificata */
  text-align: center;
  line-height: 291px;
}

Pero` non so se funziona con numeri cosi` grossi (di solito lo si usa per cose molto piu` basse).

In alternativa si deve usare un sistema completamente diverso, che usa i posizionamenti dei blocchi.

[waitec401]

Funziona con IE ma non con Firefox

[Mich_]

allora va cambiato completamente metodo.

div#foto {
  position: relative;         /* oppure absolute */
  height: 291px;
  background-color:#ccc;   /* grigetto per le prove */
}
div#foto img {
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -160px;
  margin-left: -490px;
  width: 981px;
  height: 281px;
}

HTML:
<div id="foto">[img]img_template/foto_prima.jpg[/img]</div>

Il limite di questo e` che puo` interferire con eventuali altri oggetti della pagina.