Html 为什么保证金：自动不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14756204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why margin:auto doesn't work?
提问by ahmadali shafiee
I want to center my element but when I use
我想将我的元素居中，但是当我使用
margin-left: auto;
margin-right: auto;
it doesn't work!
它不起作用！
this is my html
这是我的 html
<section id="t">
<article class="tc">Hi</article>
<article class="tc">Hi agian!</article>
</section>
and this is my css:
这是我的 css：
#t {
margin-left: auto;
margin-right: auto;
margin-top:10px;
}
.tc {
margin-left: auto;
margin-right: auto;
width: 600px;
display: inline;
border-style: solid;
border-width:1px;
}
and you can see the result here.
你可以在这里看到结果。
Can anybody help me?
有谁能够帮助我？
回答by pktangyue
margin-left: auto;
margin-right: auto;
would not effect the element width display:inline.
不会影响元素宽度display:inline。
If your want it works, you should give a fixed width, and set display:blockor display:inline-block.
如果你想要它工作，你应该给一个固定的宽度，并设置display:blockor display:inline-block。
回答by jsweazy
For margin auto to work you need to have a width on the item.
要使自动边距起作用，您需要在项目上设置宽度。
#t { width: some-width; }
#t { width: some-width; }
回答by John Conde
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: autoto work.
您正在内联显示您的文章。只有块元素可以通过将其边距设置为 来居中auto。所以你需要让它们块级元素margin: auto才能工作。
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: autoto work.
默认情况下，您的主要部分标签的宽度为 100%。所以如果它已经填满了屏幕，你就不能把它居中。所以你需要使宽度小于 100%margin: auto才能工作。
回答by MrPink
CSS
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
HTML
<body>
<section id="t">
<article class="tc">Hi</article>
<article class="tc">Hi agian!</article>
</section>
</body>
is that wat you want?
那是你想要的吗？
回答by keeg
if you are using inlinestyling you can just use text-align: center
如果您正在使用inline样式，则可以使用text-align: center
#t {
margin-left: auto;
margin-right: auto;
margin-top:10px;
text-align:center;
}
回答by Ali Asgari
#t {
margin: auto;
margin-top:10px;
width: 84px;
}
.tc {
display: inline;
border-style: solid;
border-width:1px;
}
回答by Landon
You could try giving the width a percentage, like width: 75%;. I would also give positioning to the divs, I recommend using relative.
你可以尝试给宽度一个百分比，比如 width: 75%;。我也会给 div 定位，我建议使用相对。
回答by gotohales
#tneeds a width in order to be centered.
#t需要一个宽度才能居中。
The articleswon't be centered when set to display:inline.
在articles当设置为不居中display:inline。
