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

J'essaie d'utiliser le code ci-dessus pour définir la largeur de son contenu, puis le centrer avec la marge: 0 auto;

Mais cela n'a fonctionné pour moi sur aucun navigateur. Toute suggestion?

BTW, quand je définis la propriété width, cela fonctionne très bien.

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

Answer 1

affichage: table; le placerait aussi au centre:

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

Answer 2

Puisque vous avez demandé à DIV d'être inline-block , text-align: center; est la réponse.

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