CSS菜單中心定位

Question

我在學習html/css。我想問一個愚蠢的問題。我已經定位我的頭

#header { 
    margin: 0% auto; 
    text-align: left; 
    width: 1280px; 
} 

它是在中央， 現在我要定位的子菜單比頭短一點，打算也將在該中心，但我不能。請幫助我提高我的技能。提前致謝！

Answer 1

如果我理解正確，這就是你應該做的。

在html方面，我會創建一個標題，包裝您的標題和你的子菜單。這是爲了集中一切。您將結束與以下

<div id="container"> 
    <div id="header"> 

    </div> 

    <div id="submenu"> 

    </div> 
</div> 

在CSS身邊，你用頭做你會做相同的，但這個時候你會應用中心策略，所有的3個div標籤。這將首先將容器居中，然後將內部元素置於容器本身內。這將是您可能最終的CSS。

#container { 
    margin: 0% auto; 
} 

#header { 
    margin: 0% auto; 
    text-align: left; 
    width: 1280px; 
} 
#submenu { 
    margin: 0% auto; 
} 

這是如何實現你想要的，天真的方式。更優雅的解決方案將涉及類的使用。它會爲您節省一些時間來重複編寫CSS，並且可以反覆使用。最終使用類，這是你會最終與

<div id="container" class="center"> 
     <div id="header" class="center"> 

     </div> 

     <div id="submenu" class="center"> 

     </div> 
    </div> 

.center { 
    margin: 0% auto; 
} 

#header { 
    text-align: left; 
    width: 1280px; 
} 

希望這會有所幫助。

而且http://www.w3schools.com/是資源

Answer 2

看到小提琴

小提琴：http://jsfiddle.net/uyECX/3/

演示：http://jsfiddle.net/uyECX/3/embedded/result/