[英]Center image vertically and horizontally inside of DIV with float:left?
I need a working solution to do a trival task of centering images with different dimensions, to a square div when float:left is used to place images in rows.I use div inside of div to do the trick : 我需要一个工作的解决方案来做一个繁琐的任务,将不同尺寸的图像居中,当浮动时使用方形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;
}
BUT I must use use float: left for outer-element to put images into rows and when I do images are not centered vertically (they are aligned to top border of the div) I tried some other CSS codes but float:left always makes images not vertically centered. 但我必须使用float:left for outer-element将图像放入行中,当我做的时候图像不是垂直居中的(它们与div的顶部边框对齐)我尝试了一些其他CSS代码但浮动:左边总是生成图像没有垂直居中。
Remove float:left;
删除
float:left;
from your .outer-element
as it conflicts with how the table-cell displays content. 来自
.outer-element
因为它与表格单元格显示内容的方式相冲突。 If you need to float the container left, place the .outer-element
within another container that floats left. 如果需要向左浮动容器,请将
.outer-element
放在另一个向左浮动的容器中。
HTML HTML
<div class="fl">
<div class="outer-element">
<div class="inner-element">
<img src="http://thecybershadow.net/misc/stackoverflow.png" />
</div>
</div>
</div>
CSS 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;
}
Exmaple: http://jsfiddle.net/xQEBH/17/ 例如: http : //jsfiddle.net/xQEBH/17/
Hope this helps! 希望这可以帮助!
try like this http://jsfiddle.net/aEfwC/ 试试这个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... 你的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;
}
Just add the following that you want your elements to be floated left... 只需添加以下内容即可将元素向左浮动...
.outer-element:before{content: "."; height: 0; overflow: hidden; visibility: hidden; float: left;}
Hope this helps.... 希望这可以帮助....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.