centro all’interno di un con CSS

Voglio centrare l’immagine all’interno di un div. Il div ha una larghezza fissa di 300 px. La larghezza dell’immagine è nota solo in fase di esecuzione. Di solito è più grande di 300 px, quindi l’immagine dovrebbe essere centrata e tagliare a destra e a sinistra. margine 0 auto non funziona in questo caso.

    div{width:300px;border:1px solid red; overflow:hidden} img{ /* NOTE!!!! margin:auto; doesn't work when image width is bigger than div width image width is known only at runtime!!! */ }    

Grazie per qualsiasi idea di css


UPD Questo interessante compito è seguito qui

Puoi farlo funzionare se avvolgi un altro elemento attorno all’immagine:

 

E il seguente CSS:

 .outer { width: 300px; border: 1px solid red; overflow: hidden; *position: relative; } .inner { float: left; position: relative; left: 50%; } img { display: block; position: relative; left: -50%; } 

La position: relative su .outer è contrassegnata con * quindi si applica solo a IE6 / 7. Puoi spostarlo su un foglio di stile IE condizionale, se è quello che preferisci o rimuovere del tutto * . È necessario evitare che i bambini, ora relativamente posizionati, trabocchino.

Dando il div text-align: center dovrebbe funzionare. (Potrebbe essere necessario aggiungere align='center' come proprietà affinché funzioni in IE6, comunque.) Nota : come sottolineato da @streetpc, questo metodo non funzionerà correttamente se l’immagine è più larga del contenitore.

In alternativa, potresti anche avere l’immagine come immagine di sfondo:

 background-image: url(url); background-position: center top; 

Per centrare un’immagine al centro di una pagina html:

 

image

Puoi usare la trasformazione CSS per posizionare l’elemento:

 div { position: relative; } img { position: absolute; left: 50%; transform: translateX(-50%); }