当使用 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 始终使图像不垂直居中。
最佳答案
从 .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/
希望这对您有所帮助!
关于css - 在 DIV 内部垂直和水平居中图像, float 为 :left?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10819931/