Вертикальное центрирование якоря внутри пролетов и li с помощью css

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;