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代码但是 float：left 总是使图像不垂直居中。

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/

希望这有帮助！

Answer 2

尝试这样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;
}

Answer 3

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

希望这会有所帮助......

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

3 个答案: