CSS 边距：0 自动；不适用于 <img> 标签答案

【问题标题】：CSS Margin: 0 Auto; is not working on <img> tagCSS 边距：0 自动；不适用于 <img> 标签
【发布时间】：2014-12-16 03:12:36
【问题描述】：

我的标记很简单，而且我使用的是内联 CSS。我的目标是在style HTML 属性中使用margin: 0 auto; 使图像居中。这是我尝试过的代码：

<div style="width: 100%;">
<img src="http://dummyimage.com/200x300/000000/fff" style="margin: 0 auto;"/>
</div>

为什么 CSS 没有以我的 <img> 为中心？

【问题讨论】：

标签： html css margin

【解决方案1】：

您必须使用display: block 才能使margin: 0px auto 生效。

<div style="width: 100%;">
<img src="http://placekitten.com/g/200/300" style="display: block; margin: 0px auto;">
</div>

【讨论】：

【解决方案2】：

Img 是一个内联元素，所以width: 0 auto 不起作用，除非你设置了display: block。或者你可以用text-align: center 居中，这有点奇怪，但应该类似。

另外，您应该考虑停止使用内联样式。它使 html 标记更难阅读、更难维护等。样式属于单独的 css 文件，您应该尽可能避免使用内联样式。（以及宽度、高度等 html 属性！）

好吧，margin-left:0 auto; margin-right:0 auto; 也不是真的有效。正确的形式是

margin: 0 auto;

或

margin-left: auto;
margin-right: auto;

【讨论】：

"width: 0 auto" - 你的意思是margin: 0 auto吗？

【解决方案3】：

您的样式属性语法在 div 上是错误的。另外，更改 img 标签上的样式，如下所示：

<div style="width:100%">
<img src="https://4c206b86fe5a0219d31bb1ae55c8bbdc3f028879-www.googledrive.com/host/0BzEiAml5ygAeU3N6QTRUUW53Vjg/" width="50%" height="auto" style="margin:0 auto; display:block">
</div>

【讨论】：

【解决方案4】：

text-align: center;

图像标签似乎无论如何都不是 w3c 有效的。

display: block;
margin: 0 auto;

应该是！

Considering this post

【讨论】：

text-align: center 仅在应用于图像的父级时才居中图像。