带显示的 div：inline-block 边距 0 自动不居中答案

【问题标题】：div with display:inline-block margin 0 auto not center带显示的 div：inline-block 边距 0 自动不居中
【发布时间】：2012-03-07 23:15:15
【问题描述】：

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

我尝试使用上面的代码将宽度设置为等于它的内容，然后将其居中设置为 margin: 0 auto;

但它在任何浏览器上都不适用于我。有什么建议吗？

顺便说一句，当我设置宽度属性时，它工作正常。

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

【问题讨论】：

根据@Xander 评论，如果没有宽度，DIV 将扩展到其容器的 100%。因此，“margin:0 auto”不太可能显示任何效果，因为您需要的宽度小于 100%。如果您只是想使按钮居中，为什么不将文本居中对齐？ IE。 DIV 样式中的“text-align:center”。我认为 INPUT 标签自然是内联的，所以它应该在 DIV> 内居中
@Fozzyuw，无论是否需要宽度，当我们设置 display: inline-block 时，宽度将设置为等于其内容。
您的第二个示例有效，因为您删除了display: inline-block。当您再次添加它时，设置宽度没有效果。见jsfiddle.net/anEvF
如果你偶然发现了这个帖子，但没有一个答案适合你，请检查你的 div 是否浮动。 margin: auto 不能很好地与 float 配合使用。

标签： html css

【解决方案1】：

显示：表格；也会将其定位在中心：

CSS：

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

HTML：

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

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

【讨论】：

@kapa 我知道这是一个旧评论，但我可能会认为这是积极的。 :)

【解决方案2】：

试试

body {text-align: center;}

【讨论】：

【解决方案3】：

既然您要求 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>

【讨论】：

text-align: center; 会将 div 的内联 content 居中，而不是 div 本身。
对不起，忘记删除 CSS。对不起。
不，这不是我想要的。我想将 div 本身居中。
正是我需要的。谢谢。
注意：这个讨论已经过时了。答案已经被编辑为包含一个包装 div，这样内部的原始 div 居中。所以这就是他想要的。