CSS属性Margin：0 Auto;在<img>标签上无效

Question

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

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

为什么CSS不能将<img>居中？

- Drazzah

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>

- Fahad Hasan

Answer 2

的样式属性语法有误。同时，请像下面这样更改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>

- Talmid

Answer 3

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

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

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

margin: 0 auto;

or

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

- walther

---

"width: 0 auto" - 你是不是想说 margin: 0 auto？ - nCardot

Answer 4

text-align: center;

似乎图片标签无论如何都不符合w3c的有效性。

display: block;
margin: 0 auto;

应该是这样的！

考虑到这篇文章

- user4164128

---

text-align: center 只有在应用于图像的父元素时才能使图像居中。 - nCardot