当使用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 for outer-element 将图像放入行中,当我这样做时,图像没有垂直居中(它们与div 的上边框对齐)我尝试了一些其他 CSS 代码,但 float:left 总是使图像不垂直居中。
从.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/
希望这有帮助!
尝试这样 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;
}
Your 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;}
希望这有帮助....