Vertikale Ausrichtung eines Bildes innerhalb eines div

Question

Mehr

Arnaud Le Blanc

Frage

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="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.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="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=250 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=25 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=23 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=21 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=19 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

.png" height=17 />
</div>
<div class=frame>
<img src="<iframe class="w-full h-80" loading="lazy" src="//jsfiddle.net/logo/embedded/result,js,html,css/">
/embedded/result,js,html,css/">

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

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

Joseph Marikle

4. September 2011 в 5:34

Mehr

Sie könnten dies tun:

Demo

/embedded/result,js,html,css/">

CSS

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

    text-align: center; 
    margin: em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 60px;
    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.