Immagine centrata all'interno di un box

[Cesar]

Ciao a tutti,
ho il seguente quesito:

ho un immagine in un quadratino con i bordi e uso la seguente tecnica:

[img]images/product1.gif[/img]

Con il stile:

.ImgProduct img{
	float: left;
	margin: 5px 5px 5px 5px;
	border: solid 1px #007995;
}

.ImgProduct:hover img{
border: solid 1px #00bcc4;
}

.ImgProduct:hover{
color: #00bcc4; /* Dummy definition to overcome IE bug */
}

La domanda è questa: come faccio per tenere il quadrato esterno sempre a 65x65px e nello stesso tempo, quando un immagine è più piccola di 65x65, come faccio a metterla centrata all’interno del quadrato?

Vi ringrazio.

[Mich_]

Ripartiamo dal codice HTML togliendo le dimensioni:

<a href="#" class="ImgProduct">
  [img]images/product1.gif[/img]
</a>

Poi ti serve:
- un blocco sempre della stessa dimensione (ad esempio il tag <a>)
- lo spazio all'interno dentro il quale centrare l'immagine.
CSS:

.ImgProduct {
  display: block;             /* altrimenti di default e` inline */
  width: 63px;
  height: 63px;
  border: 1px solid #007995;  /* attenzione all'ordine !! */
  line-height: 63px;           /* centra immagine in vert. */
  text-align: center;           /* centra immagine in orizz. */
  margin: 0;
  padding:0;
  background-color: ...; /* a piacere */
}
.ImgProduct:hover {
  border-color: #00bcc4;  /* cambia colore all'hover */
}

.ImgProduct img {
  border: none;
  display: inline;        /* solo nel caso ci fosse qualche attributo in prec che la rende block */
}
.ImgProduct:hover img {
  border: none;
}

Questo dovrebbe iniziare ad assomigliare a quanto chiedi, ma ho tolto il float (che e` incompatibile con il centramento) ed ho tolto i margini (che non capisco a che ti servissero).

[Cesar]

Ciao, scusami per il ritardo…
Ok, la tua soluzione è ottima. Però io volevo centrarla in orizzontale ma anche in verticale.

[Mich_]

Per centrare in verticale, l'unico modo conosciuto nel forum e` usare i posizionamenti.
La qual cosa complica molto il tutto, dato che non si puo` inserire un oggetto posizionato dentro un oggetto non posizionato (= con position: static, e quindi va modificata tutta la struttura della pagina.

Ora io non conosco tutto l'insieme della pagina, e non so neppure se le immagini fanno parte del contenuto o sono degli abbellimenti; in quest'utimo caso potresti inserire le immagini come sfondi, che possono venir centrati all'interno del blocco.

[Cesar]

ok, grazie!

[paololosco]

in realtà non è vero del tutto ciò che dice Mich_... a meno che tu non abbia esigenze di standardizzare uno stile (magari dovento sottostare a pagine php che si creano dinamicamente, cambiando il contenuto ma non il contenitore... ma questo è un altro paio di maniche) per centrare un'immagine sia orizzontalmente che verticalmente:

- posizioni l'angolo alto sinistro della tua immagine al centro del tuo contenitore
top: 32px;left: 32px;

- dai un margine negativo della metà della tua immagine contenuta - ad esempio immagine 60px - 30px d margine

marign-top: -30px margin-left: -30px;

non ti assicuro nulla ma dovrebbe funzionare...