Question

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

我的代码可以正常运行，但正如您在此jsFiddle上看到的那样，垂直居中有点 off 。

任何人都可以告诉为什么会这样吗？提前谢谢。

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”的行高是什么意思是向上和向下移动链接，如果你把它增加到大约120px就会使它居中。

Answer 2

取消display:inline-block;上的li a。

Demo

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

2 个答案: