自动边距不会使页面中的图像居中
在此示例中，图像未居中。为什么？我的浏览器是 Windows 7 上的 Google Chrome v10，而不是 IE。
<img src="/img/logo.png" style="margin:0px auto;"/>
In this example the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.
<img src="/img/logo.png" style="margin:0px auto;"/>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（10）
添加
display:block;就可以了。图像默认是内联的为了澄清，
block元素的默认宽度是auto，这当然会填充包含元素的整个可用宽度。通过将边距设置为
auto，浏览器会将一半的剩余空间分配给margin-left，另一半分配给margin-right。add
display:block;and it'll work. Images are inline by defaultTo clarify, the default width for a
blockelement isauto, which of course fills the entire available width of the containing element.By setting the margin to
auto, the browser assigns half the remaining space tomargin-leftand the other half tomargin-right.您可以使用
display:table;将自动宽度 div 居中You can center auto width div using
display:table;在某些情况下（例如早期版本的 IE、Gecko、Webkit）和继承，具有
position:relative;的元素将阻止margin:0 auto;工作，即使未设置top、right、bottom和left。将元素设置为
position:static;（默认值）可能会在这些情况下修复它。一般来说，具有指定宽度的块级元素将遵循使用相对或静态定位的margin:0 auto;。Under some circumstances (such as earlier versions of IE, Gecko, Webkit) and inheritance, elements with
position:relative;will preventmargin:0 auto;from working, even iftop,right,bottom, andleftaren't set.Setting the element to
position:static;(the default) may fix it under these circumstances. Generally, block level elements with a specified width will respectmargin:0 auto;using eitherrelativeorstaticpositioning.就我而言，问题是我设置了最小和最大宽度而没有设置宽度本身。
In my case the problem was that I had set min and max width without width itself.
每当我们不添加宽度并添加
margin:auto时，我猜它不会起作用。这是我的经验。宽度给出了确切需要提供相等边距的想法。Whenever we don't add width and add
margin:auto, I guess it will not work. It's from my experience. Width gives the idea where exactly it needs to provide equal margins.有一个替代方案：margin-left:auto; margin-right: auto; 或
margin:0 auto;对于那些使用position:absolute;的人，方法如下：您将元素的左侧位置设置为 50% (
left:50%;)，但这不会使其正确居中，为了使元素正确居中，您需要给它一个负边距它宽度的一半，这将使您的元素完美居中，这是一个示例： http://jsfiddle.net/ 35ERq/3/
there is a alternative to
margin-left:auto; margin-right: auto;ormargin:0 auto;for the ones that useposition:absolute;this is how:you set the left position of the element to 50% (
left:50%;) but that will not center it correctly in order for the element to be centered correctly you need to give it a margin of minus half of it`s width, that will center your element perfectlyhere is an example: http://jsfiddle.net/35ERq/3/
对于引导按钮：
For a bootstrap button:
我记得有一天，我花了很多时间尝试使用
margin: 0 auto将 div 居中。我上面有
display: inline-block，当我删除它时，div 正确居中。正如罗斯指出的，它不适用于内联元素。
I remember someday that I spent a lot of time trying to center a div, using
margin: 0 auto.I had
display: inline-blockon it, when I removed it, the div centered correctly.As Ross pointed out, it doesn't work on inline elements.
img{显示：伸缩；最大宽度：80%； margin: auto;}
这对我有用。在这种情况下，您还可以使用 display: table。
此外，如果您不想坚持这种方法，您可以使用以下方法：
img{position:relative;左：50%；}
img{display: flex; max-width: 80%; margin: auto;}
This is working for me. You can also use display: table in this case.
Moreover, if you don't want to stick to this approach you can use the following:
img{position: relative; left: 50%;}
将其放入正文的 css 中：
背景：#3D668F；
然后添加：
显示：块；
保证金：自动；
到img的css。
put this in the body's css:
background:#3D668F;
then add:
display: block;
margin: auto;
to the img's css.