Centering border-right vertically with height and line-height doesn't work

Question

There is this rule "when you do a line-height equal to your parent element's height - you center the text." Right ? And it works for letters LT and EN in my code. I set the height of ul 40px and line-height of li to 40px. And everything is beautiful.
But it doesnt work with border right. I need it to be as a 17px seperator between languages buttons in the center, but currently it is on top like so : http://jsfiddle.net/TomasRR/nxf5ey2a/

<ul class="lang">
    <li class="lt">
        <a href="#">LT</a>
    </li>
    <li class="en">
        <a href="#">EN</a>
    </li>
</ul>

CSS:

ul.lang {
    float: left;
    height: 40px;
    list-style:none;
}
ul.lang li {
    float: left;
    line-height: 40px;
}
ul.lang li:first-child {
    height: 17px;
    line-height: 40px;
    padding-right: 6px;
    border-right: 1px solid black;
}
ul.lang li:last-child {
    padding-left: 6px;
}
ul.lang li a{
    text-decoration: none;
    font-size: 12px;
    color: black;
}

Answer 1

line-height should be set to ul and reset to normal to li.

For li to follow line-height, they must: not float and be formatted as an inline boxe (either inline-block or inline-table) wich triggers a proper layout.

DEMO

 ul.lang {
     float: left;
     height: 40px;
     list-style:none;
     background:orange;
     line-height: 40px;
     padding:0 5px
 }
 ul.lang li {
     display:inline-block;/*no float*/
     vertical-align:middle;/* align from baseline/line-height of parent or highest box aside */ 
     line-height:1.2em;/* reset line-height to regular value */
 }
 ul.lang li:first-child {
     padding-right: 6px;
     border-right: 1px solid black;
 }
 ul.lang li:last-child {
     padding-left: 6px;
 }
 ul.lang li a {
     text-decoration: none;
     font-size: 12px;
     color: black;
 }