html - 水平的CSS菜单问题

我有一个简单的ul水平菜单，该菜单存在于设置为10％高度和100％宽度的div中。一个居中文本如何在其中水平和垂直居中？

#navlistcontainer {
    position:fixed;
    height:10%;
    bottom:0px;
    left:0px;
    right:0px;
}
#navlist li {
    display: inline;
    list-style-type: none;
}
#navlist li a {
    color:#FFF;
}

  <div id="navcontainer">
    <ul id="navlist">
        <li><a href="index.html">START</a></li>
    </ul>
  </div>

最佳答案

尝试这个：

#navlist {
 text-align: center;
 display: block;
}

#navlist li {
 display: inline;
}

对于垂直对齐，您需要将navlistcontainer的行高设置为等于其高度。我不确定它是否可以按百分比显示高度。考虑一下：

#navlistcontainer {
 height: 50px;
 line-height: 50px;
}

这是一个jsFiddle：http://jsfiddle.net/FH9sZ/

关于html - 水平的CSS菜单问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5318393/