css - 为什么我的文本不能在我的内部正确对齐元素？

Question

我一直在摆弄这个几个小时。我无法让我的文本在 25px a 元素内垂直对齐。文本总是想坐在彩色“盒子”的每个顶部。我只想要它在垂直的中间。此外，这个问题在我的所有列表中都被继承了。

#nav ul li.cat:nth-child(1) > a {
    background-color: #647484;
}

#nav ul li a {
    color: #FFFF00;
    display: block;
    font-size: 1em;
    height: 25px;
    padding-left: 30px;
    text-decoration: none;
    width: 137px;
}

HTML

<div id="nav">
<ul>
<li class="cat">
<a href="http://localhost/country/index.php/welcome/cat/19">Beef</a>
<ul>
<li class="subcat">
<a href="http://localhost/country/index.php/welcome/cat/21">Ribs</a>
</li>
</ul>
<ul>
<li class="subcat">
<a href="http://localhost/country/index.php/welcome/cat/30">Steaks </a>
</li>
</ul>
</li>
<li class="cat">
<a href="http://localhost/country/index.php/welcome/cat/19">Beef</a>
<ul>
<li class="subcat">
<a href="http://localhost/country/index.php/welcome/cat/21">Ribs</a>
</li>
</ul>
<ul>
<li class="subcat">
<a href="http://localhost/country/index.php/welcome/cat/30">Steaks </a>
</li>
</ul>
</li> <!-- etc etc -->
</ul>
</div>

Answer 1

你的 line-height 小于你的 box 的高度，所以当它实际上只是占用它应该占用的空间时，它看起来像与顶部对齐。尝试line-height: 25px根据您的身高进行设置。

请参阅 jsFiddle。