Span text mysteriously aligned to top - html

Question

I've been battling this a few hours. The text in this span is mysteriously aligned to the top of the span. Here is a screenshot from Firebug:
And here are my related CSS blocks:
.skills {
overflow:hidden;
height:100%;
}
.skills li{
border-bottom:1px dotted black;
position:relative;
width:200px;
height:18px;
margin-left:13px;
}
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
padding:0 5px;
}
Here is the HTML:
<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
<li>
<span>SOAP/Axis2</h4>
</li>
</ul>
Can you tell why this is aligned to the top? I want it in the center.
And here is the jsFiddle, where the same code results it in text being in the center. Does that mean that CSS elements higher in the hierarchy may be causing it?

Answer 1

...where the same code results it in text being in the center. Does
that mean that CSS elements higher in the hierarchy may be causing it?
I imagine that an ancestor in your actual stylesheet has the line-height set to less than 18px. You can look at the calculated line height for that element in your actual stylesheet to see what value was being applied.
The default value for line-height is roughly 1.2x (depends on browser).
Set the line-height to be equal to the non-padded height of the containing element to vertically align a single line of text (in this case, 18px).
Example fiddle: http://jsfiddle.net/4vq42/

Answer 2

No line-height. Make it the same as the height, either 18px or 100%.
.skills li span{
display:inline-block;
position:relative;
background:white;
bottom:0px;
height:100%;
line-height:18px;
padding:0 5px;
}

Answer 3

Try adding line-height: 18px to .skills li span CSS.
Edit: Just realised Tim Medora already said this. Ignore me.

Answer 4

Setting line-height to the value of your element's height is the simplest way to vertically align text.
.skills li {
height:18px;
line-height:18px;
}