Frage an image, vertical-alignment, css – Bild vertikal ausrichten in div [duplizieren]

58

Diese Frage hat hier bereits eine Antwort:

Wie kann ich ein Bild in einem Div vertikal ausrichten? 34 answers

Ich habe ein Problem mit der vertikalen Ausrichtung des Bildes 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ß, brauche ich "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!

Deine Antwort

3   die antwort
132

können Sie die Linienhöhe so einstellen, dass sie der Höhe entspricht, und sie wird vertikal zentriert. Fügen Sie dann Text hinzu und richten Sie ihn horizontal zentriert aus.

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

BEARBEITE

Ihr Code sollte folgendermaßen 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 unabhängig von ihrer Größe immer horizontal und vertikal zentriert. Hier sind zwei weitere Beispiele mit Bildern mit unterschiedlichen Abmessungen:

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

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

AKTUALISIERE

Es ist jetzt 2016 (die Zukunft!) Und es sieht so aus, als ob sich einige Dinge ändern (endlich !!).

Zurück in 2014,Microsoft hat @ angekündi dass IE8 in allen Windows-Versionen nicht mehr unterstützt wird und alle Benutzer aufgefordert werden, auf IE11 oder Edge zu aktualisieren. Nun, das soll nächsten Dienstag (12. Januar) passieren.

Warum ist das wichtig? Mit dem angekündigtendeath von IE8, wir können endlich mit @ anfang CSS3 Zauber

Wenn dies gesagt ist, folgt eine aktualisierte Methode zum horizontalen und vertikalen Ausrichten von Elementen:

.container {
    position: relative;
}

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

Mit diesemtransform: translate(); Methode, Sie müssen nicht einmal eine feste Höhe in Ihrem Container haben, es ist voll dynamisch. Ihr Element hat eine feste Höhe oder Breite? Ihr Container auch? Nein? Es spielt keine Rolle, es wird immer zentriert, da alle Zentriereigenschaften für das untergeordnete Element festgelegt sind und vom übergeordneten Element unabhängig sind. Vielen Dank, dass Sie CSS3.

Wenn Sie nur in einer Dimension zentrieren müssen, können Sie @ verwendetranslateY odertranslateX. Probieren Sie es einfach für eine Weile aus und Sie werden sehen, wie es funktioniert. Versuchen Sie auch, die Werte des @ zu ändertranslate, Sie werden es für eine Reihe von verschiedenen Situationen nützlich finden.

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

Für weitere Informationen übertransform, hier ist eine gute Ressource.

Happy Kodierung.

Die Antwort von Cthulhu ist richtig, aber wenn Sie die Pixel über und nach dem Bild überprüfen, werden Sie feststellen, dass der div eine nervige Polsterung von 3 Pixel hat (dies hängt von der Schriftgröße ab). Um es loszuwerden, fügen Sie einfach die Schriftgröße hinzu: 0; zum div. ragnar
Das 2016 Update dieser Antwort ist Gold! ;) chrisv
Vielen Dank für die Aktualisierung der Antwort ab 2016. Funktioniert wie ein Zauber !!! Phuong Nguyen
Das Update war Kupplung! TY !! Sensei James
Dies schien eine so einfache Lösung zu sein, aber ich konnte sie nicht zum Laufen bringen. Nachdem ich jeden Teil meiner WordPress-Vorlage isoliert hatte, stellte ich fest, dass mein Doctype das Problem war. Von 4.0 Transitional auf HTML5 Doctype umgestellt und das hat funktioniert! Hoffentlich hilft dies anderen, die möglicherweise auf dasselbe Problem stoßen user1380540
23

heutzutag CSS3 macht vertikale Ausrichtung wirklicheinfach

Nur zum @ hinzufüg<div> this css:

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

JSFiddle Demo

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

@ MarksCode ist bereits kompatibel mit allen modernen Browsern (IE11 +) sieheKann ich benutze. Es funktioniert auch in IE10 mit demprefixed version Jaqen H'ghar
Nizza, sollte ich Angst haben, wenn es wirklich neu ist? MarksCode
3

wenn Sie die vertikale Ausrichtung der Mitte für Inline- und Blockelemente benötigen, die Sie wie folgt verwenden können: -

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>

Sehen Sie sich die Demo an: -http: //jsfiddle.net/Ewfkk/2

Verwandte Fragen