1

I'm trying to vertical align text on a bootstrap navbar item. The text is wrapped on two lines. Its no problem to align a single line text but it gets much more difficult to vertical-align when its on two lines. I cant use line-height are there any alternatives? I havent seen any good solutions on wrapped text, many solutions doesn't take into account multiple lines of text.

HTML code

<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="http://localhost/cll/?page_id=39">SHORT SINGLE LINE</a>
    </li>
    <li class="dropdown">
        <a href="http://localhost/cll/?page_id=39">VERY LONG TEXT, WRAPPED TEXT</a>
    </li>
</ul>

CSS code

.navbar-nav > li > a
    {

    height: 58px;
    line-height: 19px;
    padding-top: 10px;
    text-align: center;
}
ZEE
  • 5,669
  • 4
  • 35
  • 53
sand
  • 73
  • 1
  • 2
  • 8

3 Answers3

3

You can use display:table-cell and display:table on the parent div instead of float:left; on the lis.

I am sure bootstrap nav elements are floated. Check this code:

.navbar-nav > li > a
{
  height: 58px;
  line-height: 19px;
  text-align: center;
  padding: 0 5px;
}
.navbar-nav{
  display: table;
  background: #f5f5f5;
  padding: 0;
  margin: 0;
}
.navbar-nav > li{
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
  float: none !important;
  text-align: center;
  border-left: 2px solid #fff;
}
.navbar-nav > li:first-child{border: 0;}
<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="http://localhost/cll/?page_id=39">SHORT SINGLE</a>
    </li>
    <li class="dropdown">
        <a href="http://localhost/cll/?page_id=39">VERY LONG TEXT, <br> done WRAPPED TEXT</a>
    </li>
</ul>
rath3r
  • 323
  • 1
  • 6
  • 19
Ram kumar
  • 3,152
  • 6
  • 32
  • 49
1

this is all what you need : 

.navbar-nav > li > a
    {

    text-align: center;

    display: inline-block;
    vertical-align: middle;
}

and you have to remove these two : 

    height: 58px;
    line-height: 19px;

LIVE DEMO

ZEE
  • 5,669
  • 4
  • 35
  • 53
-1
.navbar-nav > li > a
{
height: 58px;
line-height: 19px;
padding-top: 10px;
text-align: center;
}

you just remove that part, its not neccesary, the text stays vertically centered on its own

David
  • 55
  • 8