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 の中心にあることも気に入っています

デモはこちら ありがとう