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