CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
sand
sand

Reputation: 73

Bootstrap nav-bar: how to vertical align wrapped-/multiple line text

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

Upvotes: 1

Views: 10248

Answers (3)

Ram kumar
Ram kumar

Reputation: 3162

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>

Upvotes: 3

David
David

Reputation: 55

.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

Upvotes: -1

ZEE
ZEE

Reputation: 5849

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

Upvotes: 1

Related Questions