Frage Wie richtet man ein Bild vertikal innerhalb eines div aus?


Frage

Wie können Sie ein Bild innerhalb eines Containers ausrichten? div?

Beispiel

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

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

.frameDie Höhe ist festgelegt und die Höhe des Bildes ist unbekannt. Ich kann neue Elemente hinzufügen .frame Wenn das die einzige Lösung ist. Ich versuche dies auf IE≥7, Webkit, Gecko zu tun.

Sieh dir das Spiel an Hier


1128
2017-09-01 16:25


Ursprung


Antworten:


Der einzige (und der beste Cross-Browser) Weg, den ich kenne, ist ein inline-block Helfer mit height: 100% und vertical-align: middle auf beiden Elementen.

Also gibt es eine Lösung: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* this is required unless you put the helper span closely near the img */
    
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Oder, wenn Sie kein zusätzliches Element in modernen Browsern haben möchten und es Ihnen nichts ausmacht, IE-Ausdrücke zu verwenden, können Sie ein Pseudo-Element verwenden und es mit einem praktischen Ausdruck zum IE hinzufügen, der nur einmal pro Element ausgeführt wird Es wird keine Leistungsprobleme geben:

Die Lösung mit :before und expression() für IE: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* equals max image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    
    text-align: center; margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}
<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>


Wie es funktioniert:

  1. Wenn du zwei hast inline-block Elemente nahe beieinander, können Sie jede auf der anderen Seite ausrichten, also mit vertical-align: middle Du wirst so etwas bekommen:

    Two aligned blocks

  2. Wenn Sie einen Block mit fester Höhe haben (in px, em oder andere absolute Einheit), können Sie die Höhe der inneren Blöcke einstellen %.

  3. Also, eins hinzufügen inline-block mit height: 100% in einem Block mit fester Höhe würde ein anderer ausrichten inline-block Element darin (<img/> in Ihrem Fall) vertikal in der Nähe.

1818
2017-09-05 16:04



Dies könnte nützlich sein:

div {
    position:relative;
    width:200px;
    height:200px;
}
img {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
}
.image {
    min-height:50px
}

Referenz : http://www.student.oulu.fi/~laurirai/www/css/middle/


447
2017-07-30 05:57



Die Lösung von matejkramny ist ein guter Anfang, aber übergroße Bilder haben ein falsches Verhältnis.
Hier ist meine Gabel:

Demo: https://jsbin.com/lidebapomi/edit?html,css,output

preview


HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

373
2017-09-18 09:53



3-Linien-Lösung:

position: relative;
top: 50%;
transform: translateY(-50%);

Dies gilt für alles.

Von Hier.


155
2018-02-10 04:48



Eine pure CSS-Lösung:

http://jsfiddle.net/3MVPM/ 

Das CSS:

.frame {  
    margin: 1em 0;  
    height: 35px;
    width: 160px;
    border: 1px solid red;
    position: relative;
}  
img {  
    max-height: 25px;  
    max-width: 160px;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
}

Schlüssel Zeug

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

125
2017-09-05 11:09



Auf diese Weise können Sie ein Bild vertikal zentrieren (Demo):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

95
2017-11-22 16:03



Für diejenigen, die auf diesem Post gelandet sind und an einer moderneren Lösung interessiert sind und keine älteren Browser unterstützen müssen, können Sie dies tun:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: auto;
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}
<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Hier ist ein Stift: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


89
2017-12-29 20:13