<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>
Come posso fare l'immagine iniziare dal centro di questa casella? (centrale sia verticale che orizzontale)Come posizionare l'immagine al centro/al centro sia verticalmente che orizzontalmente
Ci sono diversi modi per farlo, e se ha bisogno di lavorare in tutti i browser (IE7 + e il resto) è necessario fare cose diverse per farlo funzionare in alcuni dei casi.
Utilizzare la posizione assoluta. Funziona solo se conosci la dimensione dell'immagine. Qui lo si imposta su position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.
vedi esempio qui: http://jsfiddle.net/JPch8/
Usa margin: 0 auto;text-align: center; e line-height/font-size. Questo è un po 'più complicato, dal momento che l'altezza della linea non funziona come dovrebbe in IE per gli elementi di blocco in linea come le immagini. È qui che entra in gioco la dimensione del carattere. Fondamentalmente, si imposta l'altezza della linea del contenitore dell'immagine sullo stesso dell'altezza del contenitore. Questo allinea verticalmente gli elementi inline, ma in IE invece devi impostare la dimensione del font per farlo funzionare.
vedi esempio qui: http://jsfiddle.net/JPch8/2/
Nel browser moderni che supportano display: flex lo si può fare semplicemente impostando il div contenitore per display: flex; align-items: center; justify-content: center;
vedi esempio qui: https://jsfiddle.net/ptz9k3th/
Nice code.L'asterisco è necessario prima che 'font-size' nel codice sia necessario e, in tal caso, quali versioni di IE fanno questa copertina? – Sara44
Ho usato la prima istruzione che funziona perfettamente, ho appena sostituito la posizione assoluta con una relativa per far centrare tutte le mie immagini nel loro div. Grazie! – Elisa
Spero di capire cosa stai cercando di ottenere.
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>
-1 per l'utilizzo del tag centrale. Hai appena ucciso 2 gattini :( –
@Caspar Kleijne Hai ragione, non so davvero come centrare un'immagine in CSS. So di allineare il testo: centrista, ma funziona per le immagini? Grazie –
margine: auto o margine: 0 auto, se si desidera modificare solo l'allineamento orizzontale – Cfreak
"float:left; position:relative "probabilmente non funziona come previsto. Gli elementi flottati sono considerati assoluti.
Per ottenere l'immagine centrata verticalmente è necessaria un'altezza sul div, e hai bisogno di altezza sui suoi genitori. (Centrare verticalmente è una specie di dolore). Il mio esempio di seguito funzionerà se questi sono i tuoi soli elementi, ma tieni presente che il height: 100% sui contenitori probabilmente interesserà il resto del tuo layout.
<html>
<head><title></title>
<style type="text/css">
html, body {
height: 100%;
}
#photo_leftPanel {
height: 500px; /*guessing*/
width: 604px;
float: left;
}
#photo_leftPanel img {
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>
mettere l'immagine in un <div> con text-align:center; senza specificare la dimensione della casella di
<div class="picture_div" style="margin:0px auto; text-align:center;">
<img src="media/BezierCurve.gif" />
</div>
in alternativa è possibile specificare width e la height della scatola <div> al fine di centrare l'immagine (in realtà la scatola div).
<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
<img src="media/BezierCurve.gif" />
</div>
Se non è necessario l'Inline immagine, è possibile considerare l'aggiunta al fondo del div con background-position: centrale e background-repeat: no-repeat. –