html - 在无序列表中垂直居中超链接时出现问题

Question

我正在使用以下(简化的)代码在 UL 中垂直居中超链接。我知道我将样式应用于超链接而不是 li 可能看起来很奇怪，但我要求整个列表元素都是可点击的。

我的代码按预期工作，但是正如您在此 jsFiddle 上看到的那样垂直居中有点偏离。

谁能告诉我这是为什么？提前致谢。

HTML

<ul>
    <li>
        <a href="/">
            <label>Foo</label>
            <span>Bar</span>
        </a>
    </li>
</ul>

CSS

ul
{
    list-style: none;
}

ul
{
    height: 100px;
    line-height: 100px;
}

li, li a
{
    display: inline-block;
}

li a
{
    line-height: 18px;
    padding: 5px 10px;
    color: #FFF;
    text-decoration: none;
}

li label
{
    float: left;
}

li span
{
    float: right;
}

Answer 1

“ul”上的行高是上下移动链接的原因，如果将其增加到大约 120 像素，它会居中。