Div с дисплеем: марка inline-block 0 auto not center

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

Я пытаюсь использовать приведенный выше код, чтобы установить ширину равного ему содержимого, а затем центрировать его с помощью поля: 0 auto;

Но это не сработало для меня в любом браузере. Любое предложение?

Кстати, когда я устанавливаю свойство width, он отлично работает.

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

Ответы

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

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

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

body {text-align: center;}