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
Post a Comment