Bootstrap 3 带有两行标题的选项卡

我正在使用 bootstrap 3 创建选项卡式视图。一些选项卡的标题很长，我使用换行符将它们显示为两行，如下所示：

 <ul class="nav nav-tabs">
    <li class="active">
        <a href="" data-toggle="tab">Home</a>
     </li>
    <li>
      <a href="" data-toggle="tab">
          <div class="text-center">Long<br/>Title</div>
        </a>
     </li>
 </ul>

但问题是现在我的单行字幕变小了。为了解决这个问题我尝试过：

• 也可以通过放置一个空行将它们分成两行。这可行，但我还希望文本垂直居中。
• 将链接放在 div 内，并在 div 上使用填充。这使得这些类不适用于我的链接，因为引导程序仅选择直接后代。

我该怎么做才能使标题大小相同并且内部文本垂直居中？

这是一个jsfiddle：http://jsfiddle.net/RLedD/ http://jsfiddle.net/RLEdD/

鉴于您当前使用的标记，以下是一种可能的 CSS 解决方案：

此处更新示例 http://jsfiddle.net/kUwK2/

.nav-tabs>li {
    height:62px;
}
.nav-tabs>li>a, .nav-tabs>li>a>div {
    height:100%;
    display:table;
}
.nav-tabs>li>a span {
    display:table-cell;
    vertical-align:middle;
}

我所做的只是包裹一个span锚元素周围的元素。这仅用于垂直居中。不幸的是，这种方法确实需要设置高度li元素。为了确保此方法不会干扰任何其他 CSS，您可以向父级添加一个类，.nav-tabs，表明li元素包含 2 行文本..然后相应地调整 CSS（例子） http://jsfiddle.net/qrDu3/