以跨度链接为中心

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>

我无法专注于高度是一个链接跨度。 我也喜欢它集中在：hover

演示here 感谢

Answer 1

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

JSFiddle - Updated

a {
    line-height:100px;
}

修

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

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