vertically align anchor with image inside a div [duplicate]

Question

I have tried many many methods for this but I just cant get it. Rather embarrassing after 3 years doing front end work - but I just cant waste any more time on this.

I have a WordPress image gallery, I need to vertically centre the images in it. I have tried setting height, line height and vertical align:middle - but no joy.

The images are added by the user - so the sizes and total number is not static - so solutions that target an individual element height specifically, isn't suitable.

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

and many variations (giving the anchor height/line-height:104px,display:block, vertical-align:middle) discussed on this site.

edit: posting a fiddle here:http://jsfiddle.net/DE4ph/2/

also - the duplicate answer solution isn't suitable as I cant (easily) change the markup as its generated by WordPress.

Answer 1

All you need to do is give the parent container a line-height with the same value as the container itself (i.e. 200px), and then set a vertical-align:middle to the image.

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

See: http://jsfiddle.net/B78nD/

Answer 2

One option out of many is to set the container div to position: relative, then add to the anchor the following styles:

position: absolute; display: inline-block; left: 50%; top: 50px; margin-left: -62.5px; margin-top: -35px;

Another option is using 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;
}

BTW If the image it's self is inside the div which is inside the anchor - from what I know it's not recommended way to HTML. You can instead change the display of the image to block or inline-block.