vertically align anchor with image inside a div

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/ ```

: Latest Promo Videos

Accepted Answer

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/

vertically align anchor with image inside a div

Solution

Problem