Вертикальное центрирование якоря в пределах пролётов и 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

Попробуйте свойства line-height и vertical-align:

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