Horizontal css menu question

问题:

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>

回答1:

try this:

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

#navlist li {
 display: inline;
}

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;
}

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

回答2:

You shouldn't define height as precentage. http://jsfiddle.net/zzdGx/ there you go fiddle for this.