垂直居中单字和多字链接答案

【问题标题】：Centering single AND multi-worded links vertically垂直居中单字和多字链接
【发布时间】：2014-04-04 14:55:34
【问题描述】：

我试图在水平导航中垂直居中单字和多字链接。多字链接工作正常，但您可以看到单字链接浮动到左侧。我尝试向 ul li a 和 ul li.colour 添加宽度，但这会改变 div 本身的宽度。

【问题讨论】：

【解决方案1】：

你可以试试这个，它有点老套，但很有效：

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

span 上的 line-height 垂直居中；您将 doubleLine 类添加到具有多条线的跨度中以恢复它们并保持它们正常工作。

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

【讨论】：

做到了。谢谢你，先生。一个更简洁的解决方案是个好主意，但这仍然可以很好地完成工作。