vertical alignment - Vertically centering an anchor within spans and li with css -


I'm using the jQuery tab, and I've added some spans for the tab header so that I use the background image You can markup here:

  & lt; Ul & gt; & Lt; Li & gt; & Lt; Span class = 'tab_outer' & gt; & Lt; Span class = 'tab_on_' & gt; & Lt; Span class = 'tab' & gt; & Lt; A href = "# Order Info" & gt; Order information & lt; / A & gt; & Lt; / Span & gt; & Lt; / Span & gt; & Lt; / Span & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Span class = 'tab_outer' & gt; & Lt; Span class = 'tab_on_' & gt; & Lt; Span class = 'tab' & gt; & Lt; A href = "#note" & gt; Notes & lt; / A & gt; & Lt; / Span & gt; & Lt; / Span & gt; & Lt; / Span & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Span class = 'tab_outer' & gt; & Lt; Span class = 'tab_on_' & gt; & Lt; Span class = 'tab' & gt; & Lt; A href = "# eventLog" & gt; Event log & lt; / A & gt; & Lt; / Span & gt; & Lt; / Span & gt; & Lt; / Span & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

Problem: The text inside the anchor is showing very below the block of anchor. If I could take it up just three pixels, then it would be right. Here are all CSS which I think is relevant:

  .tab_outer, .tab_inner, .tab {display: inline-block; Font-size: 11px; List style: none; } .tab_outer {margin-down: -3px; Padding-right: 3px; Margin-top: 4px; } .tab_inner {margin-bottom: -1px; Padding-left: 3px; }. Tab {margin-top: 0 pixels; Padding: 0 px 4px 0 px 4px; Margin-down: -1 pixel; }  

Try line-height and vertical-aligned properties:

< Previous> .tab_outer {line-height: 32px; / * Place the same size here * / vertical-align: center; }

Alternatively you can adjust the padding:

  .tab_outer {padding-bottom: 3px; }  

Comments

Popular posts from this blog

Eclipse CDT variable colors in editor -

AJAX doesn't send POST query -

wpf - Custom Message Box Advice -