vertical-align Bild in div

Question

ich habe Problem mit Bild vertical-align in div

.img_thumb { 
    float: left; 
    height: 120px; 
    margin-bottom: 5px; 
    margin-left: 9px; 
    position: relative; 
    width: 147px; 
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 3px; 
} 

.img_thumb img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    vertical-align: middle; 
} 

<div class="img_thumb"> 
    <a class="images_class" href="large.jpg" rel="images"><img src="small.jpg" title="img_title" alt="img_alt" /></a> 
</div> 

Soweit ich weiß, ich brauche "display: block;" Bild in der Mitte positionieren und das funktioniert. Auch in Tutorials finde ich viele Antworten, aber sie sind nicht "nützlich", weil alle meine Bilder nicht auf der gleichen Höhe sind!

Answer 1

Wenn Sie eine feste Höhe in Ihrem Container haben, können Sie die Zeilenhöhe so einstellen, dass sie der Höhe entspricht, und sie wird vertikal zentriert. Dann fügen Sie einfach text-align zur Mitte horizontal hinzu.

Hier ist ein Beispiel: http://jsfiddle.net/Cthulhu/QHEnL/1/

EDIT

Ihr Code sollte wie folgt aussehen:

.img_thumb { 
    float: left; 
    height: 120px; 
    margin-bottom: 5px; 
    margin-left: 9px; 
    position: relative; 
    width: 147px; 
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 3px; 
    line-height:120px; 
    text-align:center; 
} 

.img_thumb img { 
    vertical-align: middle; 
} 

Die Bilder werden immer horizontal zentriert und vertikal, egal, was ihre Größe . Hier sind 2 weitere Beispiele mit Bildern mit unterschiedlichen Dimensionen:

http://jsfiddle.net/Cthulhu/QHEnL/6/

http://jsfiddle.net/Cthulhu/QHEnL/7/

UPDATE

Es ist jetzt 2016 (die Zukunft!) Und sieht aus wie ein paar Dinge ändern sich (endlich! !).

Zurück im Jahr 2014, Microsoft announced, dass es nicht mehr IE8 in allen Versionen von Windows unterstützt und ermutigen alle Benutzer auf IE11 oder Edge zu aktualisieren. Nun, das soll nächsten Dienstag (12. Januar) geschehen.

Warum ist das wichtig? Mit dem angekündigten Tod von IE8 können wir endlich anfangen, CSS3 Magie zu verwenden.

Mit dieser wird gesagt, hier ist eine aktualisierter Weise Elemente der Ausrichtung, sowohl horizontal als auch vertikal:

.container { 
    position: relative; 
} 

.container .element { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

diese transform: translate(); Methode verwenden, Sie brauchen nicht einmal eine feste Höhe in Ihrem Behälter haben, Es ist voll dynamisch. Ihr Element hat eine feste Höhe oder Breite? Dein Behälter auch? Nein? Es spielt keine Rolle, es wird immer zentriert, weil alle zentrierenden Eigenschaften auf das Kind festgelegt sind, es ist unabhängig vom Elternteil. Danke CSS3. Wenn Sie nur eine Dimension zentrieren müssen, können Sie translateY oder translateX verwenden. Probieren Sie es einfach für eine Weile und Sie werden sehen, wie es funktioniert. Versuchen Sie auch, die Werte des translate zu ändern, Sie werden es für eine Reihe von verschiedenen Situationen nützlich finden.

Hier haben eine neue Geige: https://jsfiddle.net/Cthulhu/1xjbhsr4/

Weitere Informationen über transform, here's a good resource.

Glückliche Kodierung.

Answer 2

brauchen Sie keine Positionierung definieren, wenn Sie vertikal ausrichten Zentrum für Inline- und Block-Elemente benötigen, können Sie unten Idee erwähnt werden: -

inline-elements :- <img style="vertical-align:middle" ...> 
        <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span> 

block-elements :- <td style="vertical-align:middle"> ... </td> 
        <div style="display:table-cell; vertical-align:middle"> ... </div> 

finden Sie in der Demo: - http://jsfiddle.net/Ewfkk/2/

Answer 3

alte Frage, aber heutzutageCSS3 macht die vertikale Ausrichtung wirklich einfach!

Fügen Sie einfach auf die <div> diese CSS:

display:flex; 
align-items:center; 
justify-content:center; 

---

JSFiddle demo

anschauliches Beispiel:

.img_thumb { 
 
    float: left; 
 
    height: 120px; 
 
    margin-bottom: 5px; 
 
    margin-left: 9px; 
 
    position: relative; 
 
    width: 147px; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    border-radius: 3px; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
}

<div class="img_thumb"> 
 
    <a class="images_class" href="http://i.imgur.com/2FMLuSn.jpg" rel="images"> 
 
     <img src="http://i.imgur.com/2FMLuSn.jpg" title="img_title" alt="img_alt" /> 
 
    </a> 
 
</div>