Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
460 views
in Technique[技术] by (71.8m points)

html - 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...