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: 25px和你的身高。

See the jsFiddle.

为什么我的文字在我的<li>元素中没有正确对齐？</li>

1 个答案: