html - 在 标签内垂直对齐

Question

HTML:

<div id="navbar">
 <div id="container">
  <ul style="height:40px">
    <li><p id="navtext">Home</p></li>
  </ul>
 </div>
</div>

CSS:

ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li {
    float:left;
}
#navtext {
    color:#FFFFFF;
    padding-bottom:-50px;
}
#navbar {
    width:100%;
    height:40px;
    background-color:#3498db;
}
#container {
    margin-right:15%;
    margin-left:15%;
    vertical-align: middle;
}

我希望“主页”文本位于 <ul> 的中心位置标签是 40px 高。我曾尝试四处寻找答案，但似乎没有任何效果。我正在尝试为我的网站制作导航栏。

Answer 1

添加你的CSS:

#container ul li {line-height:10px;}

http://jsfiddle.net/PWTcL/