Bootstrap 3选项卡,带有两个标题

Question

我正在使用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上使用填充.这使得类不会应用于我的链接,因为bootstrap只选择直接后代.

我该怎么做才能使字幕大小相同,并使文本垂直居中？

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

Answer 1

鉴于您正在使用的当前标记,这里有一个可能的CSS解决方案:

这里有更新的例子

.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 (示例)