Question

<html>
<head>
<title>Test</title>
</head>
<body>
    <div>
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

div应尽可能扩展到100％，但图像不会居中。为什么呢？

Answer 1

因为您的图片是inline-block element。您可以将其更改为block-level element，如下所示：

<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />

它会居中。

Answer 2

您需要将其渲染为块级别;

img {
   display: block;
   width: auto;
   margin: auto;
}

Answer 3

添加style="text-align:center;"

尝试以下代码

<html>
<head>
<title>Test</title>
</head>
<body>
    <div style="text-align:center;vertical-align:middle;">
        <img src="queuedError.jpg" style="margin:auto; width:200px;" />
    </div>
</body>
</html>

Answer 4

我知道这是一个老帖子，但想分享我是如何解决同样的问题的。

我的图片继承了一个浮动：从父类继承。通过设置float：none，我可以设置margin：0 auto并显示：block正常工作。希望它可能在将来帮助某人。

Answer 5

我发现我必须为对象定义一个特定的宽度，否则没有别的东西会使它居中。相对宽度不起作用。

Answer 6

<div style="text-align:center;">
    <img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>

Answer 7

打开div然后输入

style="width:100% ; margin:0px auto;"

image代码（或）内容

关闭div

Answer 8

我发现...... 保证金：0自动;适合我。但是我也看到它不起作用，因为这个类被另一个具有......浮动：左; 所以注意你可能需要添加... float：none;当我编写媒体查询时，这在我的案例中起作用。

为什么没有保证金：自动居中图像？

8 个答案: