順序付けられていないリスト内でハイパーリンクを垂直方向にセンタリングするときの問題

次の（簡略化した）コードを使用して、UL内のハイパーリンクを垂直方向にセンタリングします。私はliよりもハイパーリンクにスタイルを適用するのが奇妙に思えるかもしれませんが、私はリスト要素全体をクリック可能にする必要があります。順序付けられていないリスト内でハイパーリンクを垂直方向にセンタリングするときの問題

私のコードは意図したとおりに動作しますが、このjsFiddleからわかるように、垂直センタリングは少しオフです。

これはなぜ誰に助言できますか？前もって感謝します。リンクアップとダウンを動かしいただきました！あなたの "UL" の行の高さがある

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; 
}

出典

2011-12-05 Jonathan