在無序列表中垂直居中超鏈接時的問題

我正在使用以下（簡化）代碼在UL中將一個超鏈接垂直居中。我知道我將這個樣式應用到hyperink而不是li可能會很奇怪，但是我需要整個列表元素都是可點擊的。在無序列表中垂直居中超鏈接時的問題

我的代碼正如預期的那樣工作，但是您可以在此上看到jsFiddle垂直居中有點關。

任何人都可以提出這是爲什麼？提前致謝。

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