Why margin:auto doesn't work? [duplicate]

前端未结

关注

 8  2252

北荒

相关标签:

8条回答

遇见更好的自我

2020-12-15 20:24

For margin auto to work you need to have a width on the item.

#t { width: some-width; }

http://jsfiddle.net/2sagZ/7/

0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2020-12-15 20:27

You're displaying your articles inline. Only block elements can be centered by setting their margins to auto. So you need to make them block level elements for margin: auto to work.

Your main section tag has a width of 100% by default. So you can't center it if it already fills the screen. So you need to make the width less then 100% for margin: auto to work.

0 讨论(0)
发布评论:

提交评论
- 加载中...

攒了一身酷

2020-12-15 20:37

CSS

body{
    width:100%;
}

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    width:600px;
}
.tc {
    display:inline;
    border-style: solid;
    border-width:1px;
}

HTML

<body>
<section id="t">
    <article class="tc">Hi</article>
    <article class="tc">Hi agian!</article>
</section>
</body>

is that wat you want?

http://jsfiddle.net/ahmadalli/2sagZ/5/

0 讨论(0)

迷失自我

2020-12-15 20:41

#t needs a width in order to be centered.

The articles won't be centered when set to display:inline.

0 讨论(0)
发布评论:

提交评论
- 加载中...
我寻月下人不归

2020-12-15 20:45
if you are using inline styling you can just use text-align: center

http://jsfiddle.net/3MJEm/
```
#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    text-align:center;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

刺人心

2020-12-15 20:45

#t {
margin: auto;
margin-top:10px;
width: 84px; 
}
.tc {
display: inline;
border-style: solid;
border-width:1px;
}

0 讨论(0)

1 2 下一页

热议问题