Html 水平居中 div 中的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9980531/
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 in div horizontally
提问by joschua011
I have an imgin a div (class="top_image") and I want this image to be exactly in the middle of the div but nothing I try works...
我img在 div ( class="top_image") 中有一个，我希望这个图像正好在 div 的中间，但我尝试的任何东西都不起作用......
Thanks for any help!
谢谢你的帮助！
回答by Dyin
Every solution posted here assumes that you know the dimensions of your img, which is not a common scenario.Also, planting the dimensions into the solution is painful.
此处发布的每个解决方案都假定您知道 的尺寸img，这不是常见情况。此外，将维度植入解决方案是痛苦的。
Simply set:
简单设置：
/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;
or
或者
/* for the img inside your div */
display: block;
margin: 0 auto;
That's all.
就这样。
Note, that you'll also have to set an initial min-widthfor your outer div.
请注意，您还必须min-width为您的外部div.
回答by Maxime Fabre
text-align: center will only work for horizontal centering. For it to be in the complete center, vertical and horizontal you can do the following :
text-align: center 仅适用于水平居中。要使其处于完整的中心、垂直和水平位置，您可以执行以下操作：
div
{
position: relative;
}
div img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
回答by Phil Thomas
回答by Ads
<div class="outer">
<div class="inner">
<img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
</div>
</div>
<hr />
<div class="outer">
<div class="inner">
<img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
</div>
</div>
CSS
CSS
img
{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto auto;
}
.outer
{
border: 1px solid #888;
width: 100px;
height: 100px;
}
.inner
{
display:table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
}
回答by Jay
I think its better to to do text-align center for div and let image take care of the height. Just specify a top and bottom padding for div to have space between image and div. Look at this example: http://jsfiddle.net/Tv9mG/
我认为最好为 div 做文本对齐中心并让图像处理高度。只需为 div 指定顶部和底部填充，即可在图像和 div 之间留出空间。看这个例子：http: //jsfiddle.net/Tv9mG/
回答by Arasu Pandiyan
I hope this would be helpful:
我希望这会有所帮助：
.top_image img{
display: block;
margin: 0 auto;
}
回答by DisgruntledHuman
This took me way too long to figure out. I can't believe nobody has mentioned center tags.
这花了我太长时间才弄明白。我不敢相信没有人提到中心标签。
Ex:
前任：
<center><img src = "yourimage.png"/></center>
and if you want to resize the image to a percentage:
如果要将图像大小调整为百分比：
<center><img src = "yourimage.png" width = "75%"/></center>
GG America
GG美国
