div with display:inline-block margin 0 auto not center

HtmlCss

Html Problem Overview

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

Html Solutions

Solution 1 - Html

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 - Html

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>

Solution 3 - Html

Try

body {text-align: center;}
Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

Automatically Delete Files/Folders

RFilePathDirectoryDelete File

Next Solution:

Android - flip image in xml

Android

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionetldsView Question on Stackoverflow
Solution 1 - HtmlcolossoView Answer on Stackoverflow
Solution 2 - HtmlRok KraljView Answer on Stackoverflow
Solution 3 - HtmlAlanView Answer on Stackoverflow