Bootstrap 3 tabs with two-liner titles

Question

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/

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