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/