为什么保证金:汽车不起作用？

Question

我想把我的元素集中在一起,但是当我使用时

margin-left: auto;
margin-right: auto;

它不起作用!

这是我的HTML

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

这是我的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;
}

你可以在这里看到结果.

有谁能够帮我？

Answer 1

margin-left: auto;
margin-right: auto;

不会影响元素宽度display:inline.

如果你想要它的工作原理,你应该给出一个固定的宽度,并设置display:block或display:inline-block.

Answer 2

要使margin auto工作,您需要在项目上有一个宽度.

#t { width: some-width; }

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

Answer 3

您正在内联显示您的文章。只有块元素可以通过将其边距设置为 来居中auto。因此，您需要使它们成为块级元素才能margin: auto工作。

默认情况下，主部分标签的宽度为 100%。因此，如果它已经填满屏幕，则无法将其居中。因此，您需要将宽度设置为小于 100% 才能margin: auto正常工作。