使用display:inline-block和margin 0 auto的div无法居中显示

Question

<div style="display: inline-block; margin: 0 auto;">
    <input id="abc" type="button" value="button" />
</div>

我尝试使用上述代码使元素宽度等于其内容，并使用margin: 0 auto; 居中。

但是在任何浏览器上都无法正常工作。有什么建议吗？

顺便说一下，当我设置width属性时，它可以正常工作。

<div style="width: 10em; margin: 0 auto;">
    <input id="abc" type="button" value="button" />
</div>

- etlds

---

根据@Xander的评论，如果没有设置宽度，DIV将会扩展到其容器的100％。因此，“margin:0 auto”不太可能产生任何效果，因为您需要比100％宽度更小的东西。如果您只是想将按钮居中，为什么不只是在DIV样式中使用“text-align:center”来居中对齐文本呢？我认为INPUT标签本质上是内联的，因此它应该自动居中在DIV中。 - jmbertucci

@Fozzyuw，无论宽度是否必要，当我们设置display: inline-block时，宽度将被设置为其内容相等。 - etlds

你的第二个例子是有效的，因为你删除了 display: inline-block。当你再次添加它时，设置宽度没有效果。请参见 http://jsfiddle.net/anEvF/。 - Olaf Dietsche

如果你看到这个帖子，但是其中的回答都不适用于你，那么请检查你的 div 是否被浮动了。margin: auto 和 float 不兼容。 - skibulk

Answer 1

使用display:table;也可以将元素居中：

CSS：

  .button{
    display: table;
    margin: 0 auto;
    }

HTML:

<div class="button">
<input id="abc" type="button" value="button" />
< /div>

注意：使用内联样式是一种不好的做法。

- colosso

---

我知道这是一个旧评论，但我认为这可能是一个积极的考虑。 :) - mawburn

Answer 2

因为您请求 DIV 为 inline-block，text-align: center; 是答案。

<div style="text-align: center;">
<div style="display: inline-block; text-align: left;">
    <input id="abc" type="button" value="button" />
</div>
</div>

- Rok Kralj

---

text-align: center; 会将 div 中的行内 内容 居中对齐，而不是将整个 div 居中对齐。 - yatskevich

抱歉，忘记删除 CSS 了。对不起。 - Rok Kralj

不，那不是我想要的。我想要将div本身居中。 - etlds

注意：此讨论已过时。答案已经被编辑以包含一个包装 div，使得内部原始 div 居中。所以这就是他想要的。 - Kevin Wheeler

它在我的导航栏锚点标签下方添加了一个[烦人且]不需要的细边距（当我悬停在它们上面时，它们不会变成背景颜色），但是被接受的答案没有。（虽然我不喜欢被接受的答案，因为对我来说这是hacky！） - aderchox

Answer 3

尝试

body {text-align: center;}

- Alan