CSS保证金：0自动;没有在<img>标签上工作

Question

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

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

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

Answer 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> 

Answer 2

您的样式属性语法在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>

Answer 3

Img是一个内联元素，因此width: 0 auto将不起作用，除非你设置display: block 。 或者您可以使用text-align: center ，这有点奇怪，但应该同样有效。

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

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

margin: 0 auto;

要么

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

Answer 4

text-align: center;

无论如何，在图像标签上似乎不是有效的。

display: block;
margin: 0 auto;

应该！

考虑这篇文章