Vertikale Ausrichtung eines Bildes innerhalb eines div

Question

Mehr

Quelle Nicht AMP-Version Bearbeiten

Vertikale Ausrichtung eines Bildes innerhalb eines div

Wie kann man ein Bild innerhalb eines "div"-Elements ausrichten?

Beispiel

In meinem Beispiel muss ich das <img> im <div> mit class ="frame" vertikal zentrieren:

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

Die Höhe von .frame'ist fest und die Höhe von image'ist unbekannt. Ich kann neue Elemente in .frame hinzufügen, wenn das die einzige Lösung ist. Ich versuche, dies auf Internet Explorer 7 und später, WebKit, Gecko zu tun.

Siehe das jsfiddle [hier][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

Bearbeitete Frage 11. Juli 2019 в 7:00

Programmierung

image css vertical-alignment

1. September 2011 в 4:25

20 Aufrufe

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

Hintergrundbildlösung

Ich habe das Bildelement ganz entfernt und es als Hintergrund des div mit der Klasse .frame eingestellt

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

Das funktioniert zumindest im Internet Explorer 8, Firefox 6 und Chrome 13.

Ich habe es überprüft, und diese Lösung funktioniert nicht, um Bilder mit einer Höhe von mehr als 25 Pixeln zu verkleinern. Es gibt eine Eigenschaft namens background-size, die die Größe des Elements festlegt, aber es ist CSS 3, was mit den Anforderungen von Internet Explorer 7 in Konflikt stehen würde.

Ich würde Ihnen raten, entweder Ihre Browserprioritäten zu überarbeiten und für die besten verfügbaren Browser zu entwerfen oder einen serverseitigen Code zur Größenanpassung der Bilder zu entwickeln, wenn Sie diese Lösung verwenden möchten.

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

Sie könnten dies tun:

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 */
}

JavaScript

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

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

Dies funktioniert bei modernen Browsern (2016 zum Zeitpunkt der Bearbeitung) wie in dieser Demo auf codepen gezeigt

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

Es ist sehr wichtig, dass Sie den Bildern entweder eine Klasse zuweisen oder die Vererbung nutzen, um die Bilder, die Sie zentriert haben möchten, zu bestimmen. In diesem Beispiel haben wir .frame img {} verwendet, so dass nur Bilder, die von einem div mit der Klasse .frame umschlossen werden, angesprochen werden.