不能在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; 

UPDATE：

因为你似乎改变你的例子的时候，这里是如何display和margins工作非常基本的理解：

要使任何盒子在另一个盒子的中心，你需要做两件事：

a）给外盒子一个宽度（否则内盒不知道要对准什么

b）中所述的内盒需要具有margin: 0 auto（这是一样的margin-left: auto; margin-right: auto;）

此外，两个框必须是块级元素（即有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像素绿色方块以200px为中心，宽度为600px。

现在，如果你想在绿盒子内并排两个元素的一面，你可以有你的加入内联元素，即

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