div with display:inline-block margin 0 auto not center
<div style="display: inline-block; margin: 0 auto;">
<input id="abc" type="button" value="button" />
</div>
I try to use the code above to set the width of equal it's content, and then center it with margin: 0 auto;
But it did not work for me on any browser. Any suggestion?
BTW, when I set the width property, it works fine.
<div style="width: 10em; margin: 0 auto;">
<input id="abc" type="button" value="button" />
</div>
Solution 1:
display:table; would position it in center too:
CSS:
.button{
display: table;
margin: 0 auto;
}
HTML:
<div class="button">
<input id="abc" type="button" value="button" />
< /div>
Note: Using inline styles is a bad practice.
Solution 2:
Since you requested DIV to be inline-block
, text-align: center;
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>