Div with display: brand inline-block 0 auto not center

Question

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

I am trying to use the code above to set the width of its equal content, and then center it using a field: 0 auto;

But this did not work for me in any browser. Any suggestion?

By the way, 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; Positions it in the center:

CSS

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

HTML:

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

Note. Using inline styles is bad practice.

Answer 2

Since you requested the DIV as inline-block , text-align: center; - this 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> 

Answer 3

Try

 body {text-align: center;}