HTML CSS 图像不会居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7086281/
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
HTML CSS Image won't center?
提问by
I am trying to center an image that is located within a div, which is then located inside of another div. Not to worry, I will post some code so you can all see what the heck I'm talking about here.
我试图将位于 div 内的图像居中，然后该图像位于另一个 div 内。不用担心，我会发布一些代码，这样你们都可以看到我在这里谈论的到底是什么。
HTML:
HTML：
<div id="container">
<div id="featureimage" style="width: 845px">
<img src="Stylesheets/images/globkey.jpg" alt="" />
</div>
</div>
CSS:
CSS：
body {
background-color: #383838;
margin: 0; padding: 0;
font-size: small;
color: #383838;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
* html body {
font-size: x-small; /* for IE5/Win */
font-size: small; /* for other IE versions */
}
img {
border-style: none;
}
/* Conatiner */
#container {
background-color: #fff;
width: 845px;
margin: 0 auto;
overflow: hidden;
}
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px 0;
/* I have also tried without padding and no margin!*/
}
#featureimage img{
margin-left:50%;
margin-right:50%;
width:360px;
height:360px;
}
I am fresh out of ideas here! Been at this for ever!
我对这里的想法很新鲜！一直在这！
Thank you for any help,
感谢您的任何帮助，
Evan
埃文
回答by
Images are inline elements, to center them, you can use text-align: center;or set them to display: blockand set margin: 0 auto;
图像是内联元素，要使它们居中，您可以使用text-align: center;或设置它们display: block并设置margin: 0 auto;
回答by mkk
just for sure add text-align: center to your #container, and then add margin: 20px auto; to your featureImage. If you want img to be centered within featureImage should work (featureImage will inherit text-align: center).
确定添加 text-align: center 到您的 #container，然后添加 margin: 20px auto; 到您的特征图像。如果您希望 img 在 featureImage 内居中应该可以工作（featureImage 将继承 text-align: center）。
回答by Joseph Marikle
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px 0;
text-align:center;
}
回答by Oliver Spryn
I would try this css:
我会试试这个css：
#featureimage{
width: 620px;
padding: 0 0 0 15px;
margin: 20px auto 0px auto;
text-align: center;
}
I may be totally off on this one, as I haven't tested it out.
我可能完全不喜欢这个，因为我还没有测试过。
回答by jerry
i would use this for sure,, the absolute; will keep it in that spot if you want it to move with the page put fixed; but other than that boom
我肯定会使用这个，绝对的；如果您希望它在固定页面的情况下移动，则将其保留在该位置；但除了那股热潮
#featureimage {
width: "change this code to whatever expample..." 555px;
height: "change this code to whatever example..." 96px;
position: absolute;
top: "change this to where ever it centers , you just have to mess with it.. example..." 960px;
right: "same with this i had to put - to get it right as far as i could just play with it..." -945px;
}
回答by abu_bua
It can also be solved by simple put a <center>tag:
也可以通过简单地放置一个<center>标签来解决：
<center>
<img src="abc.gif">
</center>
But the best way and html5-like is as mentioned next:
但最好的方式和 html5-like 如下所述：
define in the header:
在标题中定义：
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
To make use of this class in the body:
要在正文中使用此类：
<img src="abc.gif" alt="abc" style="width: 90%; max-width: 300px;>
That's all. The last method is that recomended by w3c.
就这样。最后一种方法是 w3c 推荐的。
回答by Hanif
According your provided markup structure it is enough to following way:
根据您提供的标记结构，以下方式就足够了：
img {
display: block;
margin: 0 auto;
}
But above approach will work if container contain single image. Bu if container contain multiple image then above technique will not work anymore then following way would be ideal:
但是如果容器包含单个图像，则上述方法将起作用。但是，如果容器包含多个图像，那么上述技术将不再适用，那么以下方法将是理想的：
#featureimage {
text-align: center;
}
img {
display: inline-block;
vertical-align:top; // It is recommended when you use css property vertical-align
}
回答by codaelux
Use:
用：
margin: auto !important;
display: block;
Also try going to Play Store download the app HTML code it will come in handy for you.
也可以尝试去 Play 商店下载应用程序 HTML 代码，它会派上用场。
