css - 无法在 css 中居中元素

Question

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

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

不起作用。

这是 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;）

此外，两个框都需要是块级元素（即 have display: block， NOT 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;
}