How to vertically center the menu for any size logo?

Question

There is a navigation bar based on bootstrap 3 . Interested in: how with the help of styles to vertically center the menu items so that at any size of the logo image they retain their alignment, moreover, solve this cross-browser (without flex )? link to fidl

 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="http://placehold.it/50x50"> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a> </li> <li class="divider"></li> <li class="dropdown-header">Examples</li> <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a> </li> <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a> </li> <li><a href="http://getbootstrap.com/examples/grid/">Grids</a> </li> <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a> </li> <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a> </li> <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a> </li> <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a> </li> <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a> </li> <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a> </li> <li><a href="http://getbootstrap.com/examples/theme/">Theme</a> </li> <li class="divider"></li> <li class="dropdown-header">Compatibility</li> <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a> </li> <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a> </li> <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a> </li> </ul> </li> <li><a href="http://getbootstrap.com/css">CSS</a> </li> <li><a href="http://getbootstrap.com/components">Components</a> </li> <li><a href="http://getbootstrap.com/javascript">JavaScript</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="http://getbootstrap.com/customize">Customize</a> </li> </ul> </div> </div> <div class="jumbotron"> <h1>Twitter Bootstrap 3.0</h1> <p class="lead">Starter template with CSS and JS included.</p> <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a> </p> </div> </div>

@ soledar10 I think it’s worth wrapping up the added styles in @media screen and (min-width: 768px) { } to use the bootstrap behavior on the smartphone.

soledar10 soledar10 22.4k five 21 51 · Accepted Answer · 2016-05-14T06:24:06

 /* Latest compiled and minified CSS included as External Resource*/ @import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); body { margin: 10px; } @media screen and (min-width: 768px) { .navbar { display: table; width: 100%; } .navbar-header, .navbar-collapse.collapse { display: table-cell!important; vertical-align: middle; float: none; } }

 <div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="http://placehold.it/100x100"></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li> <li class="divider"></li> <li class="dropdown-header">Examples</li> <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li> <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li> <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li> <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li> <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li> <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li> <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li> <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li> <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li> <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li> <li class="divider"></li> <li class="dropdown-header">Compatibility</li> <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li> <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li> <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li> </ul> </li> <li><a href="http://getbootstrap.com/css">CSS</a></li> <li><a href="http://getbootstrap.com/components">Components</a></li> <li><a href="http://getbootstrap.com/javascript">JavaScript</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li> </ul> </div> </div> <div class="jumbotron"> <h1>Twitter Bootstrap 3.0</h1> <p class="lead">Starter template with CSS and JS included.</p> <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p> </div> </div>

Gleb Kemarsky Gleb Kemarsky 6,724 2 13 38 · Answer 2 · 2016-05-10T10:38:27

Add this code to the styles:

 .navbar-nav>li>a { height: 80px; line-height: 50px; }

Here, 50px is the height of the logo, and 80px is the new height of the menu along with the indents.

line-height: 50px; center the menu items vertically.

Check the result:

 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); body { margin: 10px; } .navbar-nav>li>a { height: 80px; line-height: 50px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div class="container"> <div class="navbar navbar-default"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="http://placehold.it/50x50"> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a> </li> <li class="divider"></li> <li class="dropdown-header">Examples</li> <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a> </li> <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a> </li> <li><a href="http://getbootstrap.com/examples/grid/">Grids</a> </li> <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a> </li> <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a> </li> <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a> </li> <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a> </li> <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a> </li> <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a> </li> <li><a href="http://getbootstrap.com/examples/theme/">Theme</a> </li> <li class="divider"></li> <li class="dropdown-header">Compatibility</li> <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a> </li> <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a> </li> <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a> </li> </ul> </li> <li><a href="http://getbootstrap.com/css">CSS</a> </li> <li><a href="http://getbootstrap.com/components">Components</a> </li> <li><a href="http://getbootstrap.com/javascript">JavaScript</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="http://getbootstrap.com/customize">Customize</a> </li> </ul> </div> </div> <div class="jumbotron"> <h1>Twitter Bootstrap 3.0</h1> <p class="lead">Starter template with CSS and JS included.</p> <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a> </p> </div> </div>

That's what happens if you put the logo 100 to 100 for example - jsfiddle.net/DTcHh/20411
@ Vasya The proposed solution implies a one-time manual edit for a specific logo.
@ Vasya If you add styles to the script is not forbidden, then the calculation of the new height and line-height can be entrusted to the script .
I don’t really want to overdo the boot menu in the tables ...
@ soledar10 wrote a solution on styles without tables in the comments

How to vertically center the menu for any size logo?

2 answers 2

More articles: