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

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

我的代码的工作原理与预期一样，但是正如您在上面看到的，垂直居中有点偏离

有人能告诉我为什么会这样吗？提前谢谢

HTML

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

---

“ul”上的行高度是指上下移动链接的高度，如果将其增加到约120px，它将使链接居中。

摆脱

显示：内联块打开
li a

谢谢你@bookcasey。然而，我确实需要有一个左浮动的标签——这似乎是问题的根源。你能看一下这本书了解更多信息吗？
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;
}