Anker vertikal mit Bild innerhalb eines div ausrichten [duplicate]

Ich habe viele, viele Methoden dafür ausprobiert, aber ich bekomme es einfach nicht hin. Ziemlich peinlich nach 3 Jahren Frontend-Arbeit – aber ich kann einfach keine Zeit mehr damit verschwenden.

Ich habe eine WordPress-Bildergalerie, ich muss die Bilder darin vertikal zentrieren. Ich habe versucht, Höhe, Zeilenhöhe und vertikale Ausrichtung: Mitte einzustellen – aber keine Freude.

Die Bilder werden vom Benutzer hinzugefügt – daher sind die Größen und die Gesamtzahl nicht statisch – daher sind Lösungen, die speziell auf eine einzelne Elementhöhe abzielen, nicht geeignet.

die URL:
http://www.europa-international.net/

<dl class="gallery-item ">
<dt class="gallery-icon">
    <a href="http://www.europa-international.net/our-videos/snapshot-1-02-01-2014-15-33/" title="Snapshot 1 (02-01-2014 15-33)"><img width="125" height="70" src="http://www.europa-international.net/wp-content/uploads/2013/07/Snapshot-1-02-01-2014-15-33.png" class="attachment-homepage-gallery" alt="Latest Promo Videos"></a>
</dt>
<dd class="wp-caption-text gallery-caption">Latest Promo Videos</dd>

#gallery-1 .gallery-icon {
    height: 104px;
    line-height: 104px;
}
#gallery-1 .gallery-icon a {
    vertical-align: middle;
}

und viele Variationen (mit Angabe der Ankerhöhe/Zeilenhöhe: 104px, Anzeige: Block, Vertikalausrichtung: Mitte), die auf dieser Website diskutiert werden.

edit: hier eine Geige posten:http://jsfiddle.net/DE4ph/2/

auch – die doppelte Antwortlösung ist nicht geeignet, da ich das Markup nicht (leicht) ändern kann, da es von WordPress generiert wird.

Alles, was Sie tun müssen, ist, dem übergeordneten Container eine Zeilenhöhe mit dem gleichen Wert wie dem Container selbst (z. B. 200 Pixel) zu geben und dann ein vertical-align:middle auf das Bild zu setzen.

.gallery-icon { 
    height: 200px; 
    line-height: 200px; 
}
.gallery-icon img { 
    vertical-align:middle; 
}

Sehen: http://jsfiddle.net/B78nD/

Eine Möglichkeit von vielen ist es, den Container einzustellen div zu positionieren: relativ, dann zum hinzufügen Anker folgende Stilrichtungen:

Position: absolut; Anzeige: Inline-Block; links: 50 %; oben: 50px; Rand links: -62,5 px; Rand oben: -35px;

Eine weitere Option ist die Verwendung von vertical-align:

#gallery-1 .gallery-icon {
    height: 104px;
}
#gallery-1 .gallery-icon a {
     line-height: 104px;
}

#gallery-1 .gallery-icon a img {
     vertical-align: middle;
}

Übrigens, wenn sich das Bild selbst innerhalb des div befindet, das sich innerhalb des Ankers befindet – von dem, was ich weiß, ist es kein empfohlener Weg zu HTML. Sie können stattdessen die Anzeige des Bildes in Block oder Inline-Block ändern.