div with display:inline-block margin 0 auto not center

Question

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

I try to use the code above to set the width of equal it's content, and then center it with margin: 0 auto;

But it did not work for me on any browser. Any suggestion?

BTW, when I set the width property, it works fine.

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

Answer 1

display:table; would position it in center too:

CSS:

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

HTML:

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

Note: Using inline styles is a bad practice.

Answer 2

Since you requested DIV to be inline-block, text-align: center; is the answer.

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