Help align the top menu content vertically. I use bootstrap 3 ...

Example

HTML

<nav class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="http://static2.wikia.nocookie.net/__cb20130816092518/despicableme/images/a/a7/DespicableMe.png" alt="Logo" class="navbar-logo"> </a> </div> <div class="collapse navbar-collapse navbar-right nav-list"> <ul class="nav navbar-nav"> <li><a class="nav-link">About</a></li> <li><a class="nav-link">Our solution</a></li> <li><a class="nav-link">Gallery</a></li> <li> <button type="button" class="btn navbar-btn">Play<i class="fa fa-facebook-square fa-2x"></i> </button> </li> </ul> </div> </div> </nav>

CSS

  .navbar { font-size: 18px; box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2); vertical-align: middle; } .navbar-brand { padding: 0; margin: 0; } .navbar-brand img { height: 100%; margin: 8px; display: block; } .nav-list a { margin-right: 1em; } .nav-list button { padding-left: 1em; padding-right: 1em; text-align: left; font-weight: bold; font-size: 18px; } .nav-list button i { display: inline-block; vertical-align: middle; margin-left: 10px; } button { background-color: green; }

    1 answer 1

    Add to css is at the bottom and will be so enter image description here

     .navbar-nav{ display:flex; align-items:center; }

    • It seems to me or "Play" is slightly higher than the menu items .. That is not on the same horizontal line ... Thank you! - Slava PV