디스플레이가있는 div : inline-block margin 0 auto not center

디스플레이가있는 div : inline-block margin 0 auto not center

---

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

위의 코드를 사용하여 내용의 너비를 동일하게 설정 한 다음 여백을 중앙에 배치합니다. 0 auto;

그러나 어떤 브라우저에서도 작동하지 않았습니다. 어떠한 제안?

BTW, 너비 속성을 설정하면 제대로 작동합니다.

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

---

디스플레이 : 테이블; 중앙에도 배치합니다.

CSS :

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

HTML :

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

참고 : 인라인 스타일을 사용하는 것은 좋지 않습니다.

---

당신이되고 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>

---

시험

body {text-align: center;}

참고 URL : https://stackoverflow.com/questions/9313276/div-with-displayinline-block-margin-0-auto-not-center