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/

CSS菜单中心定位

2 个答案: