垂直居中單條和多條鏈接

Question

我試圖垂直居中水平導航中的單條和多條措辭鏈接。多言語鏈接可以很好地工作，但正如你所看到的，單詞鏈接浮動到左邊。我試着給ul li a和ul li.colour增加一個寬度，但是它改變了div本身的寬度。

http://codepen.io/Compton/pen/ufGCI

Answer 1

你可以試試這個，這是一個有點hackish，但它的工作原理：

ul li span { 
    display: inline-block; 
    vertical-align: middle; 
    height: 110px; 
    font-size:2em; 
    text-align: center; 
    padding: 0 20px; 
    line-height: 110px; 
} 
.doubleLine { 
    display: table-cell; 
    line-height: 1em; 
} 

上跨度中心其垂直行高;您添加doubleLine類以跨越多行來恢復它們並使它們保持原樣。

我想看到一個比這更簡潔的解決方案，但它現在仍然有效。您可能會遇到麻煩，因爲雙線跨度只能看起來像他們的工作，他們並不總是適用於每個字的組合。你可以通過將其中一個單詞改爲兩個字符來測試，你會發現它實際上並不居中。