网页 |屏幕中央菜单栏

Question

需要一些帮助。我刚开始学习 HTML，今天一直在研究如何制作菜单，但在这样做时遇到了问题。

我似乎不知道如何在屏幕上居中显示菜单。

这就是我目前所拥有的；

<div id="navMenu">
    <ul>
        <li><a href="#">Home</a></li>

        <li><a href="#">WWW.</a>
        <ul>
            <li><a href="#">Through the years</a></li>
        </ul></li>

        <li><a href="#">Browsers</a>
        <ul>
            <li><a href="#">IE</a></li>
            <li><a href="#">Firefox</a></li>
            <li><a href="#">Chrome</a></li>
        </ul></li>

        <li><a href="#">CSS</a>
        <ul>
            <li><a href="#">CSS 2.1</a></li>
            <li><a href="#">CSS 3</a></li>
        </ul></li>

        <li><a href="#">Scripting</a>
        <ul>
            <li><a href="#">JavaScripts</a></li>
            <li><a href="#">jQuery</a></li>
        </ul></li>

    </ul>
</div>

当前的 CSS；

#navMenu{
    margin:0;
    padding:0;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li{
    margin:0;
    padding:0;
    list-style:none;
    float: left;
    position: relative;

    background-color: #999;
    border-radius: 5px;
}
#navMenu ul li a{
    text-align: center;
    text-decoration:none;
    height:30px;
    width:150px;
    display:block;
    color: #FFF;
    border: 1px solid #FFF;
    text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    top:32px;
}
#navMenu ul li:hover ul{
    visibility:visible;
}
#navMenu li:hover{
    background-color: #09F;
}
#navMenu ul li:hover ul li a:hover{
    background-color: #CCC;
    color: #000;
}
#navMenu a:hover{
    color:#000;
}

以上产生这个.... http://gyazo.com/55cf62d121ef16eb1248e5246d0accae

无论如何要在屏幕中央获得菜单栏。

旁注::此网站上是否有剧透标签？

Answer 1

尝试使用 display: inline-block和 text-align: center .

设置display: inline-block对于 <ul>和 text-align: center用于容器 #navMenu .设置text-align: left对于 #navMenu li修复子菜单。

还有

Example

#navMenu{
    margin:0;
    padding:0;
    text-align: center;
}
#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
    display: inline-block;
}
#navMenu li{
    margin:0;
    padding:0;
    text-align: left;
    float: left;
    list-style:none;
    position: relative;
    background-color: #999;
    border-radius: 5px;
}