css - 在 DIV 内部垂直和水平居中图像， float 为 :left?

Question

当使用 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 代码但是 float:left 始终使图像不垂直居中。

Answer 1

从 .outer-element 中删除 float:left;，因为它与表格单元格显示内容的方式冲突。如果您需要将容器向左浮动，请将 .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;
}

例子: http://jsfiddle.net/xQEBH/17/

希望这对您有所帮助!