垂直居中的邊框與高度和線條高度垂直不起作用

Question

有一條規則「當您執行與父元素的高度相等的線條高度時 - 居中文本。」對 ？它適用於我的代碼中的字母LT和EN。我將ul 40px的高度和li的行高設置爲40px。而且一切都很美。
但它沒有與邊界權利。我需要它作爲中心語言按鈕之間的知識+分隔符，但目前它在上面就像這樣：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應設置爲ul和復位到正常li。

對於li跟隨line-height，它們必須：不會漂浮和被格式化爲一個內聯boxe（或者inline-blockinline-table或）至極觸發適當的佈局。

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; 
} 

Answer 2

ul.lang li:first-child { 
    height: 17px; 
} 

你怎麼樣改變到正確的40px如果你想它完全適合其40px高的父母？

That fixes it。

Answer 3

垂直對齊僅適用於內聯元素。

爲此，不浮動的列表項，而不是內嵌顯示出來：

ul.lang li { 
    display: inline; 
    line-height: 40px; 
} 

Updated Fiddle

Answer 4

添加填充和邊界的<a>，它應該工作：

ul.lang li:first-child a { 
    padding-right: 6px; 
    border-right: 1px solid black; 
} 

Answer 5

使用

display:inline 

財產代替

float:left 

看到這個演示 - http://jsfiddle.net/unicode/g846u1nv/