html - CSS菜单中心定位

Question

我正在学习 html/css。我想问一个愚蠢的问题。我已经定位了我的标题

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

它在中心， 现在我想放置一个比标题短一点并且也位于中心的子菜单，但我不能。请帮助我提高我的技能。提前致谢!

Answer 1

如果我理解正确，这就是你应该做的。

在 html 方面，我会创建一个 header ，它包含您的 header 和子菜单。这样才能使一切居中。你最终会得到以下结果

<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/是资源