如何垂直对未知大小的随机图像进行中心化

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*/
}

检查这个演示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;
}

检查演示Fiddle2

Answer 2

对不起，我还不能发表评论。

你想要这样的东西吗？

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

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