How to vertically centre random images of unknown sizes

Question

I have searched for a solution for this CSS issue but the solutions I have found do not seem to work in my situation.

I am pulling in random images from Flickr. Some of them are portrait, some are landscape. When the pictures selected include both portrait and landscape images I want to ensure they are all centred vertically.

I have read that

vertical-align:middle; 
display:table-cell; 

on the container should make this work, but in my case it doesn't - perhaps some of the other CSS in place is stopping this working.

I have created a JSFiddle to show my problem: http://jsfiddle.net/alexbfree/C35DR/2/

Can you help?

Alex

Answer 1

The code with table-cell can do the trick but you need to remove the float property:

div.flickr_badge_image {
  width:23.8%;
  margin: 0 1.5% 1.5% 0;
  /*float:left; Remove this*/
}

Check this Demo Fiddle

Now if you want to keep the float you can also do this to center the a tags inside:

div.flickr_badge_image:before {
  content:" ";
  display:inline-block;
  height:100%;
  background:red;
  vertical-align:middle;
}
div.flickr_badge_image a {
  display:inline-block;
  vertical-align:middle;
}

Check Demo Fiddle2

Answer 2

Sorry I cant comment yet.

Do you want something like this?

<center>
<div id="box-2148-0-0-0" class="module ui rounded embossed shadow yellow  module-box">

http://jsfiddle.net/C35DR/4/