css - How to center navbar elements vertically (Twitter Bootstrap)? -


This is my CSS / Less CSS code so far:

  // navbar becomes taller @nobar height: 60px; // Create Navbar Link Text 18px Navbar- Internal {font-size: 18px; } // create nebrar brand text 36px .navbar .brand {font-size: 36px; }   

What it produces:

image Enter details here

FYI I am using Twitter Bootstrap demo code, I've changed the html (different from brand name change).

As you can see, the brand name is standing inside the navbar as it should be, but there are no navigation links (they are slightly higher at the top). This problem became clear only once, when I changed the height of Naubar.

If this is a help, then by highlighting the elements in Chrome it shows:

 Enter image details here

.brand class uses a different line-height from the original text which is used during bootstrap, as well as some other important differences.

Less relevant parts of the original Bootstrap Navbar

.brand :

  .brand {// are suitable for $ NavbarHeight @elementHeight: 20px; Padding: ((Nawabar High - @ Element Hight) / 2 - 2) 20px ((Nawabar High - @ Element Hight) / 2 + 2); Font-size: 20px; Line-height: 1; }   

For links in Netravar:

  .navbar .nav & gt; Le & gt; A {@elementHeight: 20px; Padding: ((Nawabar High - @ Element Hight) / 2 - 1) 10px ((Nawabbar High - @ ElementHyit) / 2 + 1); Line-height: 19 pence; }   

You will probably need to play with the values ​​of @alehandhite , row-height , and perhaps padding < / Code> for .navbar .nav & gt; Le & gt; A selector (these default values ​​are for a 40px @navbarHyight ) to display larger 60px @navbarHeight . Probably try to start a 40px @elementHighight and / or a 29px line-height.

Comments