使用 float:left 在 DIV 内垂直和水平居中图像？

当使用 float:left 将图像按行放置时，我需要一个可行的解决方案来完成将不同尺寸的图像居中到方形 div 的琐碎任务。我在 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 作为外部元素将图像放入行中，当我这样做时，图像没有垂直居中（它们与 div 的顶部边框对齐），我尝试了一些其他 CSS 代码，但是向左飘浮总是使图像不垂直居中。

Remove float:left;从你的.outer-element因为它与表格单元格显示内容的方式冲突。如果需要将容器向左浮动，请将.outer-element在另一个向左浮动的容器中。

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

Exmaple: http://jsfiddle.net/xQEBH/17/

希望这可以帮助！