如何垂直居中放置未知尺寸的随机图像

我已经为此CSS问题寻找解决方案，但我发现的解决方案似乎不适用于我的情况。如何垂直居中放置未知尺寸的随机图像

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

我已阅读，

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

容器上应使这项工作，但对我来说它没有 - 或许有些替代其它CSS被停止这方面的工作。

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

你能帮忙吗？

亚历

来源

2014-02-07 alexbfree

与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

来源

2014-02-07 20:09:13 DaniP

太谢谢你了！这正是我需要的！谢谢！只有一个问题，你能解释一下内容：“”部分？我不熟悉那个属性...... – alexbfree

对不起，我不能尚未置评。

你想要这样的东西吗？

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

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

来源

2014-02-07 20:14:25 razielx4crazy

谢谢你花时间看这个。我其实想要图像集中在行，如果我不清楚，对不起。 – alexbfree

如何垂直居中放置未知尺寸的随机图像

回答

相关问题