DIV中垂直和水平居中的图像浮动:左？

Question

我需要一个工作的解决方案来做一个繁琐的任务,将不同尺寸的图像居中,当浮动时使用方形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 for outer-element将图像放入行中,当我做的时候图像不是垂直居中的(它们与div的顶部边框对齐)我尝试了一些其他CSS代码但浮动:左边总是生成图像没有垂直居中.

Answer 1

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

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

希望这可以帮助!