Question

我已经搜索了这个CSS问题的解决方案，但我找到的解决方案在我的情况下似乎不起作用。

我从Flickr中随机抽取图片。其中一些是肖像，一些是风景。当所选图片包括纵向和横向图像时，我想确保它们全部垂直居中。

我已经读过那个

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

容器上的

应该可以使这个工作，但在我的情况下，它不会 - 或许其他一些CSS正在停止这种工作。

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

你能帮忙吗？

Alex

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

Answer 2

很抱歉，我无法发表评论。

你想要这样的东西吗？

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

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

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

2 个答案: