css - 无法在 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;是一样的)

此外，两个框都需要是 block 级元素(即具有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;
}