Centrage vertical d'une ancre dans les travées et li avec css

Question

J'utilise les onglets jQuery, et j'ai ajouté quelques travées aux en-têtes des onglets pour pouvoir utiliser une image d'arrière-plan. Voici le balisage:

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

Le problème: le texte à l'intérieur des points d'ancrage affiche sur le fond même du bloc de l'ancre. Si je pouvais juste le déplacer comme trois pixels, ce serait parfait. Voici toutes les CSS que je pense est pertinent:

.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

Essayez les propriétés ligne hauteur et vertical-align:

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

vous pouvez également régler le padding:

.tab_outer { 
    padding-bottom: 3px; 
} 

Answer 2

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