如何在float:left的DIV中使图片垂直水平居中？

Question

我需要一个可行的解决方案来完成一个简单的任务，即在使用float: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将图像放入行中的外部元素，当我这样做时，图像不会垂直居中（它们与div的顶部边框对齐）。我尝试了一些其他CSS代码，但float:left总是使图像不垂直居中。

- Rorkkkk

---

请在 JS Fiddle、JS Bin 或类似的网站上发布一个实时演示，展示您正在处理的内容并演示出现了什么问题。 - David Thomas

浮点数不适用于表格单元格。 - jasssonpet

必须在http://www.jsfiddle.net上放置演示。 - Bipin Chandra Tripathi

Answer 1

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

<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/

希望这能帮到你！

- rebz

---

这帮了我！谢谢 @rebz - Coastal-Cam

Answer 2

你的 CSS...

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

只需添加以下代码，即可使您的元素向左浮动...

.outer-element:before{content: "."; height: 0; overflow: hidden; visibility: hidden; float: left;}

希望这可以帮到你。

- Bhojendra Rauniyar

Answer 3

试试这样 http://jsfiddle.net/aEfwC/

<div align="center">
    <div class="outer-element">
    <div class="image"></div>
</div>   
</div>


.outer-element
{
     width:300px;height:300px;
     float:left;
     background-color:#2a2a2a;
    position:relative;
 }
.image
{
width:128px;
height:128px;
background:url(http://thecybershadow.net/misc/stackoverflow.png);
vertical-align:middle; 
background-repeat:no-repeat;
}

- CSS Guy