水平css菜单问题 [英] Horizontal css menu question

问题描述

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

I have a simple ul horizontal menu that exists within a div that is set to 10% height and 100% width. How does one center text horizontally and vertically within it?

#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 等于它的高度。我不知道它将工作与高度的百分比。请考虑这个：

For vertical alignment you'd need to set the line-height of navlistcontainer equal to it's height. I'm not sure it will work with height in percentage. Consider this:

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

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

Here is a jsFiddle: http://jsfiddle.net/FH9sZ/

这篇关于水平css菜单问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！