垂直居中单个和多个措辞的链接

Question

我正试图在水平导航中垂直居中单个和多个措辞的链接。多措辞链接工作正常，但你可以看到单个措辞链接向左浮动。我尝试为ul li和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类添加到具有多行的spans中以恢复它们并使它们像它们一样工作。

我希望看到比这更简洁的解决方案，但它现在再次起作用。你可能会遇到麻烦，因为双线跨度只是看起来像它们有效，它们并不总是适用于每个单词组合。您可以通过将其中一个单词更改为两个字符来测试它，您会发现它实际上并不是以它为中心。