使用css縱向定位錨點內的錨點和li

Question

我正在使用jQuery選項卡，並向選項卡標題添加了一些跨度，因此我可以使用背景圖像。這裏的標記：

<ul> 
    <li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#orderInfo"> 
     Order Info</a></span></span></span></li> 
    <li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#notes"> 
     Notes</a></span></span></span></li> 
    <li><span class='tab_outer'><span class='tab_inner'><span class='tab'><a href="#eventLog"> 
     Event Log</a></span></span></span></li> 
</ul> 

問題：錨內的文本顯示在錨的塊的最底部。如果我能像三個像素一樣移動它，那就完美了。這裏的一切，我認爲相關的CSS：

.tab_outer, .tab_inner, .tab 
{ 
    display: inline-block; 
    font-size: 11px; 
    list-style: none; 
} 

.tab_outer 
{ 
    margin-bottom: -3px; 
    padding-right: 3px; 
    margin-top: 4px; 
} 

.tab_inner 
{ 
    margin-bottom: -1px; 
    padding-left: 3px; 
} 

.tab 
{ 
    margin-top: 0px; 
    padding: 0px 4px 0px 4px; 
    margin-bottom: -1px; 
} 

Answer 1

試試行高和垂直對齊屬性：

.tab_outer { 
    line-height: 32px; /* Put the corresponding size here */ 
    vertical-align: middle; 
} 

或者你可以調整填充：

.tab_outer { 
    padding-bottom: 3px; 
} 

Answer 2

margin: 0px; 
padding: 0px; 
vertical-align: super;