Question

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

#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>

Answer 1

试试这个：

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

#navlist li {
 display: inline;
}

对于垂直对齐，您需要将navlistcontainer的行高设置为等于它的高度。我不确定它的高度与百分比有关。考虑一下：

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

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

Answer 2

您不应将高度定义为百分比。 http://jsfiddle.net/zzdGx/你可以在这里弄清楚。

水平css菜单问题

2 个答案: