23

我想将我的元素居中，但是当我使用

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

你可以在这里看到结果。

有谁能够帮我？

4

8 回答 8

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

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

如果你想让它工作，你应该给一个固定的宽度，并设置display:blockor display:inline-block。

于 2013-02-07T16:40:50.697 回答
13

要使边距自动工作，您需要在项目上有一个宽度。

#t { width: some-width; }

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

于 2013-02-07T16:39:34.570 回答
2

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/

于 2013-02-07T16:42:07.177 回答
2

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

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

于 2013-02-07T16:38:21.390 回答
1

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

http://jsfiddle.net/3MJEm/

#t {
    margin-left: auto;
    margin-right: auto;
    margin-top:10px;
    text-align:center;
}
于 2013-02-07T16:52:22.270 回答
0

您可以尝试给宽度一个百分比，例如 width: 75%;。我也会给 div 定位，我建议使用相对。

于 2013-02-07T16:38:46.680 回答
0

#t需要一个宽度才能居中。

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

于 2013-02-07T16:39:13.180 回答
0 
#t {
margin: auto;
margin-top:10px;
width: 84px; 
}
.tc {
display: inline;
border-style: solid;
border-width:1px;
}
于 2014-05-20T20:35:19.323 回答