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

您可以看到结果here。

有人能帮助我吗？

Answer 1

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

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

如果您希望它有效，您应该给出固定的宽度，并设置display:block或display:inline-block。

Answer 2

要使边距自动生效，您需要在项目上设置宽度。

#t { width: some-width; }

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

Answer 3

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>

是你想要的吗？

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

Answer 4

您正在以内联方式显示文章。只有块元素可以通过将其边距设置为auto来居中。因此，您需要使margin: auto的块级元素生效。

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

Answer 5

你可以尝试给宽度一个百分比，如宽度：75％;。我也会给div定位，我推荐使用亲戚。

Answer 6

#t需要宽度才能居中。

设置为articles时，display:inline不会居中。

Answer 7

如果您使用inline样式，则可以使用text-align: center

http://jsfiddle.net/3MJEm/

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    text-align:center;
}

Answer 8

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

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

8 个答案: