css - 使跨度链接居中

Question

我正在尝试创建菜单。

<div class="container">
<ul>
    <li class="xd_nav_link_1"><a href=""><span>link</span></a></li>
    <li class="xd_nav_link_2"><a href=""><span>link</span></a></li>
    <li class="xd_nav_link_3"><a href=""><span>link</span></a></li>
    <li class="xd_nav_link_4"><a href=""><span>link</span></a></li>
</ul>

我不能专注于高度是一个链接跨度。我也喜欢它以a为中心：悬停

演示在这里 谢谢

Answer 1

在这种情况下，您只需要添加一个等于链接高度的行高。

JSFiddle - 更新

a {
    line-height:100px;
}

修改

a {
    line-height:100px;
    vertical-align:top;
}

a:hover {
    line-height:50px;
}