How to center navbar elements vertically (Twitter Bootstrap)?

Question

This is my CSS/LESS CSS code so far:

//make navbar taller
@navbarHeight: 60px;

//make navbar link text 18px
.navbar-inner {
    font-size: 18px;
}

//make n         


        

Answer 1

I've just had a similar issue with Bootstrap 3 but with the brand eliment. In the end I used the following css:

.navbar-brand {
  font-size: 3em;
  line-height: 1em;
}

My nav bar has increased in size due to a 50px image, with top and bottom margins of 10px. Not sure if that is of any help.

Answer 2

The .brand class uses a different line-height than the base text that is used throughout Bootstrap, as well as a few other key differences.

Relevant parts from the original bootstrap navbar LESS -

For .brand:

.brand {
  // Vertically center the text given $navbarHeight
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
  font-size: 20px;
  line-height: 1;
}

For links in the navbar:

.navbar .nav > li > a {
  @elementHeight: 20px;
  padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1);
  line-height: 19px;
}

You'll probably need to play around with the values of @elementHeight, line-height, and maybe padding for the .navbar .nav > li > a selector to reflect the bigger 60px @navbarHeight (these default values are meant for a 40px @navbarHeight). Maybe try a 40px @elementHeight and/or a 29px line-height to start.

Answer 3

If the above answer doesn't help, and you haven't touch the html, the only thing I can think of is the css. You might want to look at the css which the bootstrap example used and modify the sizes of .navbar-inner and .navbar .brand accordingly.

Answer 4

You can try this:

display: table-cell;