Question

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

<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生效。

＆＃13;

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

＆＃13;

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: 0 auto;

或

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

Answer 4

text-align: center;

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

display: block;
margin: 0 auto;

应该是！

Considering this post

CSS保证金：0自动;不适用于<img/>代码

4 个答案: