html - 如何垂直居中未知大小的随机图像

Question

我已经为这个 CSS 问题寻找了解决方案，但我找到的解决方案似乎并不适合我的情况。

我正在从 Flickr 中提取随机图像。其中一些是肖像，一些是风景。当所选图片同时包含纵向和横向图像时，我想确保它们都垂直居中。

我读过

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

在容器上应该可以让它工作，但在我的情况下它不能 - 也许其他一些 CSS 正在阻止它工作。

我创建了一个 JSFiddle 来显示我的问题:http://jsfiddle.net/alexbfree/C35DR/2/

你能帮忙吗？

亚历克斯

Answer 1

带有 table-cell 的代码可以解决这个问题，但您需要删除 float 属性:

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

检查这个 Demo Fiddle

现在如果你想保持 float ，你也可以这样做让a标签居中:

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

检查 Demo Fiddle2