Come allineare verticalmente un'immagine in un div

Question

Altro

Fonte Versione non AMP Modifica

Come allineare verticalmente un'immagine in un div

Come si può allineare un'immagine all'interno di un div contenente?

Esempio

Nel mio esempio, ho bisogno di centrare verticalmente la <img> nel <div> con class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

L'altezza di .frame'è fissa e l'altezza dell'immagine è sconosciuta. Posso aggiungere nuovi elementi in .frame se questa è l'unica soluzione. Sto cercando di farlo su Internet Explorer 7 e successivi, WebKit, Gecko.

Vedi il jsfiddle [qui][1].

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Peter Mortensen

Domanda modificata 11º luglio 2019 в 7:00

Programmazione

image css vertical-alignment

1º settembre 2011 в 4:25

29 visualizzazioni

Benjamin Udink ten Cate · Answer 1 · 2011-09-04T13:17:02+00:00

Soluzione dell'immagine di sfondo

Ho rimosso del tutto l'elemento immagine e l'ho impostato come sfondo del div con una classe di .frame.

http://jsfiddle.net/URVKa/2/

Questo almeno funziona bene su Internet Explorer 8, Firefox 6 e Chrome 13.

Ho controllato, e questa soluzione non funziona per ridurre le immagini più grandi di 25 pixel di altezza. C'è una proprietà chiamata background-size che imposta la dimensione dell'elemento, ma è CSS 3 che sarebbe in conflitto con Internet Explorer 7 requisiti.

Ti consiglierei di rifare le priorità del tuo browser e progettare per i migliori browser disponibili, o di ottenere del codice lato server per ridimensionare le immagini se vuoi usare questa soluzione.

Joseph Marikle · Answer 2 · 2011-09-04T17:34:04+00:00

Si potrebbe fare così:

Demo

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}

br/>

JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

anglimasS · Answer 3 · 2011-09-01T17:29:55+00:00

Questo funziona per i browser moderni (2016 al momento della modifica) come mostrato in questo demo su codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

È molto importante che tu dia alle immagini una classe o usi l'ereditarietà per indirizzare le immagini che ti servono centrate. In questo esempio abbiamo usato .frame img {} in modo che solo le immagini avvolte da un div con una classe di .frame siano mirate.