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

我希望将“Home”文本置于<ul>标记内，其高度为40px。我试过寻找答案，但我尝试的任何东西似乎都没有用。我正在尝试为我的网站制作一个导航栏。

Answer 1

添加你的css：

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

http://jsfiddle.net/PWTcL/

Answer 2

如果您只有一行，请使用line-height: 40px，然后移除margin上的<p>：

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

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

Answer 3

尝试：

li {
    float:left;
    height:100%;
    display:table;
}
#navtext {
    color:#FFFFFF;
    padding-bottom:-50px;    
    display:table-cell;
    vertical-align:middle;
}

Fiddle here.

<li>标签内的vertical-align </li>

3 个答案: