Html 在带有浮动的 DIV 内部垂直和水平居中图像：左？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10819931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center image vertically and horizontally inside of DIV with float:left?
提问by Rorkkkk
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 :
我需要一个可行的解决方案来执行将具有不同尺寸的图像居中的琐碎任务，当 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;
}
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:leftalways makes images not vertically centered.
但我必须使用 float: left 将图像放入行中，当我做图像时，图像不垂直居中（它们与 div 的顶部边框对齐）我尝试了一些其他的 CSS 代码，但float:left总是使图像不垂直居中。
回答by rebz
Remove float:left;from your .outer-elementas it conflicts with how the table-cell displays content. If you need to float the container left, place the .outer-elementwithin another container that floats left.
float:left;从您中删除，.outer-element因为它与表格单元格显示内容的方式相冲突。如果您需要将容器向左浮动，请将其放置.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!
希望这可以帮助！
回答by CSS Guy
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;
}
回答by Bhojendra Rauniyar
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....
希望这可以帮助....
