5

我需要一个可行的解决方案来完成将具有不同尺寸的图像居中的琐碎任务，当 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总是制作图像不垂直居中。

4

3 回答 3

15

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/

希望这可以帮助！

于 2012-05-30T17:56:52.383 回答
0

试试这样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;
}
于 2012-05-30T17:42:48.843 回答
0

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

希望这可以帮助....

于 2013-03-10T04:56:33.617 回答