Vertically center text in ul a li - html

Question

So, apparently I can't seem to figure out why the text inside the li keeps sticking to the top of it ... I've tried playing with heights, line-heights, vertical-aligns, displays (table, table-cell, inline-block, inline ... ) and all that stuff, but idk why, I can't see what's wrong with it ...
jsFiddle - http://jsfiddle.net/qdq1jg4g/2/
HTML
<header>
<span id="headerTitle">Title</span>
<ul id="headerMenu">
<li> Plugin </li>
<li> how-to </li>
<li> Docs </li>
</ul>
</header>
CSS
#headerMenu{
position: absolute;
border: 1px dashed blue;
font-size: 16pt;
right: 15%;
height: 100%;
line-height: 100%;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#headerMenu a{
height: 100%;
line-height: 100%;
}
#headerMenu a li{
border: 1px solid red;
float: left;
list-style: none;
height: 100%;
line-height: 100%;
padding: 0px 20px;
}
Thank you in advance.

Answer 1

Here is one way of doing it with the a tags embedded with the li tags:
header{
background: #eee;
color: #333;
height: 100px;
width: 100%;
top: 0px;
margin: 0px 0px 10px 0px;
font-size: 26pt;
position: relative;
z-index: 100;
transition: all 0.1s;
}
#headerTitle{
position: absolute;
bottom: 15px;
left: 10px;
}
#headerMenu{
position: absolute;
border: 1px dashed blue;
font-size: 16pt;
right: 15%;
height: 100%;
line-height: 1;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#headerMenu li {
float: left;
display: table;
border: 1px solid red;
height: 100%;
margin: 0 20px; /* optional, depends on your layour */
}
#headerMenu a {
display: table-cell;
vertical-align: middle;
border: 1px dashed red;
height: 100%;
padding: 0 20px;
}
<header>
<span id="headerTitle">Title</span>
<ul id="headerMenu">
<li>Plugin</li>
<li>how-to</li>
<li>Docs</li>
</ul>
</header>