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: hover 为中心

演示 here谢谢

Answer 1

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

JSFiddle - Updated

a {
    line-height:100px;
}

修订

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

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