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>

Ответ 1

дисплей: стол; позиционирует его и в центре:

CSS

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

HTML:

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

Примечание. Использование встроенных стилей - плохая практика.

Ответ 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>

Ответ 3

Try

body {text-align: center;}