Classe per centrare immagine

[tryhere]

Ho un'immagine che appartiene alla classe "centrata".
Quali attributi devo assegnare alla classe "centrata" affinchè l'immagine sia centrata sia in verticale che in orizzontale rispetto al div che la contiene?

per centrare orizzontalmente basta usare text-align: center;
Per centrare sia in verticale che in orizzontale, prova a guardare qui: http://css.flepstudio.org/css-tutori...izzontale.html

[tryhere]

Io volevo agire sulle proprietà dell'immagine, non del div...perchè per come è costruito il mio sito non tutto il contenuto di quel div deve essere centrato ma quando nel div c'è quell'immagine, lei lo deve essere.

[dreadnaut]

Devi settare i margini orizzontali ad auto, ad esempio con:

div img {
  margin: 0 auto;
  display: block;
}

Il metodo text-align: center suggerito serve però con vecchie versioni di IE.

[tryhere]

Questo però ha effetto su tutte le immagini contenute nel mio div giusto? Se invece volessi che la centratura valesse solo per l'immagine con id "pippo"?

[dreadnaut]

Usi il selettore per l'id pippo. Eh, tempo di studiarli 'sti css

[tryhere]

Grazie mille, ma c'è ancora un problema: per quanto riguarda la centratura orizzontale funziona ma per quanto riguarda quella verticale no...

[dreadnaut]

Per la centratura verticale, non hai letto la guida suggerita sopra da cgfcesano sopra?

[tryhere]

Ho messo vertical-align:middle; ma non ho impostato la "modalità tabella" sul div perchè è solo quella particolare immagine che quando inserita in quel div deve essere centrata...come posso fare?

[dreadnaut]

C'è la sezione "3. Centrare verticalmente un elemento ad altezza fissa" apposta per te.

[tryhere]

Si ma nella sezione 3 va a modificare i parametri del div, non dell'immagine...

[dreadnaut]

Quello è il modo in cui si centra l'immagine. O lo usi, o tieni l'immagine non centrata.

Se non vuoi o puoi modificare lo stile del div contenitore, aggiungine uno attorno all'immagine ed usa quello.

[tryhere]

Aspetta, mi sto facendo confusione da solo :)
Supponiamo di aver il mio div attuale (e gli assegnamo l'id "esterno"), dentro a questo ci metto un altro div come mi hai suggerito (e gli assegnamo l'id "interno") e all'interno di questo mettiamo l'immagine (e gli assegnamo l'id "foto").
Il div esterno non deve avere nessuna proprietà impostata con i css.
Ora mi riassumeresti cosa devo mettere come proprietà css degli id "interno" e "foto"? :)

[dreadnaut]

Guida linkata sopra, sezione 3.

[tryhere]

#foto {
	margin:0 auto;
  	display:block;
}
  	
#interno {
  	height:32px;
  	position:absolute;
  	top:50%;
  	margin-top:-16px;
}

Il risultato è che è quasi centrato in verticale e non centrato in orizzontale, dove sbaglio? Ho seguito proprio la sezione che dici tu.

[dreadnaut]

Il div #interno ha le stesse dimensioni dell'immagine, quindi se centri l'immagine in quel div, rimane dov'è.

Devi centrare orizzontalmente #interno dentro #esterno, applicando il margin: 0 auto; ad esso, e non alla foto.

[tryhere]

#interno {
        margin:0 auto;
  	display:block;
  	height:32px;
  	position:absolute;
  	top:50%;
  	margin-top:-16px;
}

ma non è cambiato nulla...

[dreadnaut]

-sigh- metti una pagina online con questa roba, così si capisce di più.

btw, ad #esterno hai dato position: relative ?

[tryhere]

Ecco qui

[dreadnaut]

Ok, i due metodi contemporaneamente non funzionano, quindi devi usare il metodo per la centratura verticale anche per quella orizzontale. A questo punto puoi eliminare #interno ed avere un div solo.

.foto {
  display: block;
  margin-top: -16px;
  margin-left: -16px;
  position: absolute; /* la posizione di questo elemento è assoluta */
  top: 50%;
  left: 50%;
}

#esterno {
  position: relative; /* gli elementi DENTRO questo avranno posizione relativa ad esso */
}

[tryhere]

Grazie mille, ora funziona!! :)