为什么不设置边距：自动居中图像？

93

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

在div100％扩展，因为它应该，但图像没有中心本身。为什么？

html css

— 乔·菲利普斯
source

197

因为您的图片是inline-block元素。您可以将其更改为如下所示的块级元素：

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

它将居中。

— 凯尔特斯
source

10

您需要将其渲染为块级；

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

— 死医
source

为什么只水平对齐而不垂直对齐？

— 贝尔先生

4

垂直对齐并不像您希望的那样简单。一切都取决于CSS规范-查看有关此事的精美简洁文章-phrogz.net/css/vertical-align/index.html

— TheDeadMedic 2010年

8

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

— 普兰尼·拉娜（Pranay Rana）
source

我认为您的答案不正确，但是您对显示类型没有任何解释。

— 乔·菲利普斯

尽管您的回答可以被视为替代解决方案，但我不建议这样做。原因是这样的事实，例如，如果在div内添加其他任何内容，例如标题，标题将与图像对齐。要将标题向左对齐，您必须为其编写更多样式。您必须继续对添加到div中的任何内容执行此操作。因此display: block;，强烈建议添加到图像中。

— Devner 2014年

2

我知道这是一篇旧文章，但想分享我如何解决相同的问题。

我的图像继承了父类的float：left。通过设置float：none，我可以使margin：0自动并显示：块正常工作。希望它将来能对某人有所帮助。

— 瑞安·霍林斯沃思（Ryan Hollingsworth）
source

1

我发现我必须为对象定义特定的宽度，否则没有其他东西可以使它居中。相对宽度无效。

— 猫女
source

2

这不能为问题提供答案。要批评或要求作者澄清，请在其帖子下方留下评论-您可以随时对自己的帖子发表评论，一旦拥有足够的声誉，您就可以在任何帖子中发表评论。

— Kristijan Iliev 2015年

我的观点是，尽管有几个人给出了可行的答案，但只有在代码中包含对象宽度的特定定义时，他们才起作用。例如：<img [...等，等等，...] style =“ display：block; margin：auto; width：200px” />可以使用，但不要使用相对大小，例如“ width ：50％”。当然，如果使用“ width：100％”，则居中不是问题，因为对象的左侧或右侧没有边距。

— 猫女

0

打开div然后放

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

image 标签（或）内容

关闭div

— 哈姆德·伊斯兰
source

0

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

— 萨利尔
source

0

我发现...保证金：0自动；为我工作。但是我也看到它不起作用，因为该类被另一个具有... float：left;的特殊性压倒了。因此请注意，您可能需要添加... float：none;。在我编写媒体查询代码时，这对我来说很有效。

— 迪诺
source