Vertically align the anchor with the image inside the div

Question

I tried many methods for this, but I just can't get it. It's rather embarrassing after 3 years of front end work - but I just can't spend more time on it.

I have a WordPress image gallery, I need to vertically center the images in it. I tried to set the height, line height and vertical align: medium - but without joy.

Images are added by the user - therefore, the dimensions and the total number are not static - therefore, solutions designed for the individual element height are not suitable.

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 the many options (giving anchor height / line height: 104px, display: block, vertical-align: middle) discussed on this site.

edit: post fiddle here: http://jsfiddle.net/DE4ph/2/

also - a duplicate answer solution is not suitable as I cannot (easily) change the markup as its generated WordPress.

Answer 1

All you have to do is give the parent container the line height with the same value as the container itself (i.e. 200px), and then set the vertical alignment: in the middle of the image.

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

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

Answer 2

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

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

Another option is to use vertical alignment:

 #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 this image is inside a div inside the anchor, from what I know, this is not recommended for HTML. Instead, you can change the display of the image to a block or embedded block.