我需要一个有效的解决方案来做一个将不同维度的图像居中的繁琐任务,当浮动时使用方形div：left用于将图像放在行中.我在div中使用div来完成这个技巧：
.outer-element{ //wrap tile div
display:table-cell;
width:300px;height:300px;
text-align:center ;
vertical-align:middle ;
float:left;
margin-bottom:15px;
}
.inner-element{ //div with image inside
display:inline-block;
}
但我必须使用float：left for outer-element将图像放入行中,当我做的时候图像不是垂直居中的(它们与div的顶部边框对齐)我尝试了一些其他CSS代码但浮动：左边总是使图像没有垂直居中.
解决方法
删除float：left;来自.outer元素,因为它与表格单元格显示内容的方式相冲突.如果需要向左浮动容器,请将.outer元素放在另一个向左浮动的容器中.
HTML
<div class="fl">
<div class="outer-element">
<div class="inner-element">
<img src="http://thecybershadow.net/misc/stackoverflow.png" />
</div>
</div>
</div>
CSS
.fl {float:left;}
.outer-element{
display:table-cell;
width:300px;
height:300px;
vertical-align:middle;
background:#666;
text-align:center;
margin-bottom:15px;
}
.inner-element{
display:inline-block;
}
〔实施例：
http://jsfiddle.net/xQEBH/17/
希望这可以帮助！
