带显示的div：内嵌块边距0自动不居中

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

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

但是在任何浏览器上都不适合我。 任何build议？

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

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

Answer 3

尝试

 body {text-align: center;}