无法在 css 中居中元素

Question

我下载了一个模板并对其进行了编辑。现在我想将 one_third 元素居中，但

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

不起作用。

This 是 jsfiddle 中的模板。

谁能帮帮我？

Answer 1

要使margin-left:auto; 和margin-right:auto; 起作用，元素需要具有宽度。所以试试类似的东西：

margin-left: auto;
margin-right: auto;
width: 600px;

更新：

由于您似乎一直在更改您的示例，因此以下是对 display 和 margins 工作原理的非常基本的了解：

要让任何盒子在另一个盒子中居中，您需要做两件事：

a) 给外框一个宽度（否则内框不知道要靠什么居中

b) 内框需要有margin: 0 auto（这个和margin-left: auto; margin-right: auto;一样）

另外，两个框都需要是块级元素（即有display: block，而不是display: inline;）

所以放在一起会是这样的：

HTML：

<section id="outer">
    <section id="inner"></section>
</section>

CSS：

#outer {
    width: 600px;
    display: block;
    border: 1px solid red;
}
#inner {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}

这将为您提供一个 200 像素 x 200 像素的绿色框，中心位于一个宽度为 600 像素的红色框内。

现在，如果您想在绿色框中并排放置两个元素，您可以在其中添加内联元素，即

<section id="outer">
    <section id="inner">
        <article>Hi</article>
        <article>Hi agian!</article>
    </section>
</section>



#outer {
    width: 600px;
    display: block;
    border: 1px solid red;
}
#inner {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    border: 1px solid green;
}
#inner article {
    display: inline;
}