So richten Sie ein Bild innerhalb eines Div vertikal aus

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

Beispiel

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

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

.frameDie Höhe ist fest und die Höhe des Bildes ist unbekannt. Ich kann neue Elemente hinzufügen, .framewenn dies die einzige Lösung ist. Ich versuche dies in Internet Explorer 7 und höher, WebKit, Gecko.

Sehen Sie die jsfiddle hier .

.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>

Der einzige (und beste Cross-Browser-) Weg, wie ich weiß, besteht darin, einen inline-blockHelfer mit height: 100%und vertical-align: middleauf beiden Elementen zu verwenden.

Es gibt also eine Lösung: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* Equals maximum 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=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

Wenn Sie in modernen Browsern kein zusätzliches Element haben möchten und keine Lust haben, Internet Explorer-Ausdrücke zu verwenden, können Sie ein Pseudoelement verwenden und es mit einem praktischen Ausdruck, der nur einmal pro Element ausgeführt wird, zu Internet Explorer hinzufügen Es treten also keine Leistungsprobleme auf:

Die Lösung mit :beforeund expression()für Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum 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=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Wie es funktioniert:

1. Wenn Sie zwei inline-blockElemente nebeneinander haben, können Sie sie an der Seite des anderen ausrichten, sodass vertical-align: middleSie Folgendes erhalten:

   

2. Wenn Sie einen Block mit fester Höhe haben (in px, emoder einem anderen absoluten Einheit), kann die Höhe der inneren Blöcke in gesetzt %.

3. So, eine Zugabe inline-blockmit height: 100%mit fester Höhe in einem Block würde ein anderes auszurichten inline-blockElement darin ( <img/>in diesem Fall) vertikal in der Nähe davon.

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
}

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

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;
}

Eine dreizeilige Lösung:

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

Dies gilt für alles.

Von hier aus .

Eine reine CSS-Lösung:

.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;
}

<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>

Schlüsselmaterial

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

Für eine modernere Lösung und wenn ältere Browser nicht unterstützt werden müssen, können Sie Folgendes tun:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: 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

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

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Sie können auch Flexbox verwenden, um das richtige Ergebnis zu erzielen:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}

<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Mit Flexbox gibt es eine super einfache Lösung !

.frame {
    display: flex;
    align-items: center;
}

Sie können versuchen, das CSS von PI auf einzustellen display: table-cell; vertical-align: middle;

Sie können den folgenden Code ausprobieren:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

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

Hintergrundbildlösung

Ich habe das Bildelement vollständig entfernt und es als Hintergrund für das div mit einer Klasse von festgelegt .frame

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

Dies funktioniert zumindest in Internet Explorer 8, Firefox 6 und Chrome 13 einwandfrei.

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

Ich würde Ihnen raten, entweder Ihre Browserprioritäten zu wiederholen und für die besten verfügbaren Browser zu entwerfen, oder serverseitigen Code zu erhalten, um die Größe der Bilder zu ändern, wenn Sie diese Lösung verwenden möchten.

Stellen Sie sich vor, Sie haben

<div class="wrap">
    <img src="#">
</div>

Und CSS:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

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";
})

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

Die Schlüsseleigenschaft ist display: table-cell;für .frame. Div.framewird als Inline angezeigt, daher müssen Sie es in ein Blockelement einschließen.

Dies funktioniert in Firefox, Opera, Chrome, Safari und Internet Explorer 8 (und höher).

AKTUALISIEREN

Für Internet Explorer 7 müssen wir einen CSS-Ausdruck hinzufügen:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Meine Lösung: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Dies funktioniert für moderne Browser (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 geben oder die Vererbung verwenden, um auf die Bilder abzuzielen, die Sie zentrieren möchten. In diesem Beispiel haben wir verwendet, .frame img {}damit nur Bilder als Ziel ausgewählt werden, die von einem Div mit einer Klasse von umbrochen wurden .frame.

Probieren Sie diese Lösung mit reinem CSS aus. Http://jsfiddle.net/sandeep/4RPFa/72/

Vielleicht ist es das Hauptproblem mit Ihrem HTML. Sie verwenden keine Anführungszeichen, wenn Sie c lass& image heightin Ihrem HTML definieren.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Wenn ich mit dem imgTag arbeite , bleiben 3 bis 2 Pixel Platz top. Jetzt nehme ich ab line-heightund es funktioniert.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

Die line-heightEigenschaft wird in verschiedenen Browsern unterschiedlich gerendert. Wir müssen also verschiedene line-heightEigenschaftsbrowser definieren .

Überprüfen Sie dieses Beispiel: http://jsfiddle.net/sandeep/4be8t/11/

Überprüfen Sie dieses Beispiel auf line-heightUnterschiede in verschiedenen Browsern: Unterschiede in der Eingabehöhe in Firefox und Chrome

Ich bin mir bei Internet Explorer nicht sicher, aber unter Firefox und Chrome sollte der folgende CSS-Inhalt funktionieren , wenn Sie einen imgin einem divContainer haben. Zumindest für mich funktioniert es gut:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Lösung mit einer Tabelle und Tabellenzellen

Manchmal sollte es gelöst werden, indem es als Tabelle / Tabellenzelle angezeigt wird. Zum Beispiel ein schneller Titelbildschirm. Dies wird auch von W3 empfohlen. Ich empfehle Ihnen, diesen Link mit dem Namen Zentrieren eines Blocks oder Bildes von W3C.org zu überprüfen.

Die hier verwendeten Tipps sind:

• Absoluter Positionierungsbehälter als Tabelle angezeigt
• Vertikal ausgerichtet zum zentrierten Inhalt, der als Tabellenzelle angezeigt wird

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}

<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Persönlich bin ich nicht einverstanden, Helfer für diesen Zweck einzusetzen.

Ein einfacher Weg, der für mich funktioniert:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Es funktioniert sehr gut für Google Chrome. Probieren Sie dies in einem anderen Browser aus.

Zum Zentrieren eines Bildes in einem Container (es könnte sich um ein Logo handeln) neben einem Text wie diesem:

Grundsätzlich wickeln Sie das Bild

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Wenn Sie mit pixelgroße Margen leben können, fügen Sie einfach font-size: 1px;auf die .frame. .frameDenken Sie jedoch daran, dass Sie jetzt auf 1em = 1px den Rand auch in Pixel festlegen müssen.

http://jsfiddle.net/feeela/4RPFa/96/

Jetzt ist es nicht mehr in Opera zentriert…

Ich hatte das gleiche Problem. Das funktioniert bei mir:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

Sie können dies verwenden:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

Mit tableund table-cellMethode erledigen Sie den Job, insbesondere weil Sie auch auf einige alte Browser abzielen. Ich erstelle ein Snippet für Sie, mit dem Sie es ausführen und das Ergebnis überprüfen können:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}

<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div> 

Ich habe mit der Verwendung von Polstern für die Ausrichtung der Mitte herumgespielt. Sie müssen die Größe des Außencontainers der obersten Ebene definieren, die Größe des Innencontainers sollte jedoch geändert werden, und Sie können die Auffüllung auf verschiedene Prozentwerte einstellen.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

Die beste Lösung ist das

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

Verwende das hier:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

Und Sie können variieren font-size.

Möchten Sie ein Bild ausrichten, das nach einem Text / Titel steht und beide sich in einem Div befinden?

Siehe JSfiddle oder Run Code Snippet.

Stellen Sie nur sicher, dass Sie an allen Elementen (div, img, title usw.) eine ID oder eine Klasse haben.

Bei mir funktioniert diese Lösung in allen Browsern (für mobile Geräte müssen Sie Ihren Code anpassen mit: @media).

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}

<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>