Bootstrap 3 tabs with two-liner titles

问题

I am using bootstrap 3 to create a tabbed view. Titles of some of the tabs are long and i used line breaks to display them in two lines like this:

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

But the problem is now my one-liner captions are smaller. To fix this i tried:

• Making them two line also by putting a blank line. This works but I would also like the text to be vertically centered.
• Put the link inside a div, and use padding on the div. This makes the classes not applied to my link, because bootstrap only selects the direct descendants.

What can i do to make the captions same size and also vertically center the text inside?

Here is a jsfiddle: http://jsfiddle.net/RLEdD/

回答1:

Given the current markup you're using, here is one possible CSS solution:

UPDATED EXAMPLE HERE

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

All I did was wrap a span element around the anchor elements. This is just used for vertical centering. Unfortunately, this method does require that a height is set on the li elements. In order to ensure that this method doesn't interfere with any other CSS, you could add a class to the parent, .nav-tabs, indicating that the li elements contain 2 lines of text.. then just tweak the CSS accordingly (example)

回答2:

Quick and dirty (definitely not ideal) but you avoid overwriting any bootstrap rules:

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

来源：https://stackoverflow.com/questions/22495828/bootstrap-3-tabs-with-two-liner-titles