0

私はこれを何時間もいじっています。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>
4

1 に答える 1

0

ラインの高さはボックスの高さよりも低いため、実際に必要なスペースを占有しているときに、上部に揃えられているように見えます。line-height: 25px身長に合わせて設定してみてください。

jsFiddleを参照してください。

于 2012-04-06T18:16:53.627 に答える