带显示的div:内联块边距0自动不居中

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>

Answer 1

显示:表; 将它定位在中心:

CSS:

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

HTML:

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

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

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>