Navbar Button ist nicht vertikal ausgerichtet

Question

Ich habe mit Bootstrap gespielt, um eine Navbar so einzurichten, wie ich es möchte. Ich kämpfe, wie Sie vielleicht in meinem Code sehen, alles richtig in diesem Menü vertikal zentriert zu haben. Ich habe eine durchschnittliche Korrektur vorgenommen, indem ich mit dem Rand gespielt habe, aber ich kann den Knopf nicht reparieren. Ich bin sicher, es gibt eine einfache Lösung mit position:relative, um alles in der Mitte zu haben, aber ich kann es nicht finden.

http://codepen.io/anon/pen/yMGEZb

Vielen Dank für Ihre Hilfe!

Answer 1

updated codepen

Fügen Sie einfach den Knopf innerhalb navbar-rightli .no benötigen CSS zu ändern.

Beispiel Snippet

.navbar-default .navbar-header .navbar-brand { 
 
    font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif'; 
 
    font-weight: 200; 
 
    letter-spacing: 1px; 
 
    color: #fdcc52; 
 

 
} 
 
.navbar-default .navbar-header .navbar-brand:hover, 
 
.navbar-default .navbar-header .navbar-brand:focus { 
 
    color: #fcbd20; 
 
} 
 
.navbar-default .navbar-header .navbar-toggle { 
 
    font-size: 12px; 
 
    color: #222222; 
 
    padding: 8px 10px; 
 
} 
 
.navbar-default .nav > li > a { 
 
    font-family: Montserrat; 
 
    font-weight:300; 
 
    font-style:normal; 
 
    text-transform: uppercase; 
 
    letter-spacing: 2px; 
 
    font-size: 13px; 
 
    color: #121212; 
 
} 
 
/*@media (min-width: 768px) 
 
    .button-nav { 
 
    display: inline-block; 
 
    z-index: 101; 
 
}*/ 
 

 
.button-nav { 
 
    position: relative; 
 
    bottom: 50%; 
 
    background-color: transparent; 
 
    font-family: Montserrat; 
 
    font-weight: 300; 
 
    font-style:normal; 
 
    letter-spacing:2px; 
 
    font-size: 13px; 
 
    color: #121212; 
 
    text-transform: uppercase; 
 
    border: 1px solid #121212; 
 
    padding: 18px 40px; 
 
    transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1); 
 
    cursor:pointer; 
 
    text-align:center; 
 
    text-rendering: optimizeLegibility; 
 

 
} 
 

 
.button-nav:hover { 
 
background-color: #1c1c1c; 
 
    font-family: Montserrat; 
 
    font-weight: 300; 
 
    font-style:normal; 
 
    letter-spacing:2px; 
 
    font-size: 13px; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    border: 1px solid #1c1c1c; 
 
    padding: 18px 40px; 
 
    transition: color .4s cubic-bezier(.694,.0482,.335,1),background-color .4s cubic-bezier(.694,.0482,.335,1),border .4s cubic-bezier(.694,.0482,.335,1); 
 
    cursor:pointer; 
 
    text-align:center; 
 
    text-rendering: optimizeLegibility; 
 

 

 

 

 

 

 
} 
 

 
.navbar-default .nav > li > a, 
 
.navbar-default .nav > li > a:focus { 
 
    color: #121212; 
 
} 
 
.navbar-default .nav > li > a:hover, 
 
.navbar-default .nav > li > a:focus:hover { 
 
    color: #fdcc52; 
 
} 
 
.navbar-default .nav > li.active > a, 
 
.navbar-default .nav > li.active > a:focus { 
 
    color: #fdcc52 !important; 
 
    background-color: transparent; 
 
} 
 
.navbar-default .nav > li.active > a:hover, 
 
.navbar-default .nav > li.active > a:focus:hover { 
 
    background-color: transparent; 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar-default { 
 
    background-color: transparent; 
 
    border-color: transparent; 
 
    } 
 
    .navbar-default .navbar-header .navbar-brand { 
 
    color: rgba(34, 34, 34, 0.1); 
 
    } 
 
    .navbar-default .navbar-header .navbar-brand:hover, 
 
    .navbar-default .navbar-header .navbar-brand:focus { 
 
    color: white; 
 
    } 
 
    .navbar-default .nav > li > a, 
 
    .navbar-default .nav > li > a:focus { 
 
    color: #121212; 
 
    } 
 
    .navbar-default .nav > li > a:hover, 
 
    .navbar-default .nav > li > a:focus:hover { 
 
    color: white; 
 
    } 
 
    .navbar-default.affix { 
 
    background-color: white; 
 
    border-color: rgba(34, 34, 34, 0.1); 
 
    } 
 
    .navbar-default.affix .navbar-header .navbar-brand { 
 
    color: #222222; 
 
    } 
 
    .navbar-default.affix .navbar-header .navbar-brand:hover, 
 
    .navbar-default.affix .navbar-header .navbar-brand:focus { 
 
    color: #fdcc52; 
 
    } 
 
    .navbar-default.affix .nav > li > a, 
 
    .navbar-default.affix .nav > li > a:focus { 
 
    color: #222222; 
 
    } 
 
    .navbar-default.affix .nav > li > a:hover, 
 
    .navbar-default.affix .nav > li > a:focus:hover { 
 
    color: #fdcc52; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container" style="height:80px;"> 
 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
        <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> 
 
       </button> 
 
      
 
      <a class="navbar-brand page-scroll" href="#page-top"> 
 
<img src="http://svgshare.com/i/17J.svg" width="220" height="50" alt=""> 
 
        
 
        </a> 
 
      </div> 
 

 
      
 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
       <ul class="nav navbar-nav navbar-right" style="margin-top:20px;"> 
 
        <li> 
 
         <a class="page-scroll" href="#download">Download</a> 
 
        </li> 
 
        <li> 
 
         <a class="page-scroll" href="#features">Features</a> 
 
        </li> 
 
        <li> 
 
         <a class="page-scroll" href="#contact">Contact</a> 
 
        </li> 
 
                   <li><button class="button-nav pull-right">Get started</button></li> 
 
       
 
       </ul> 
 
     
 
      </div> 
 
      <!-- /.navbar-collapse --> 
 
     </div> 
 
     <!-- /.container-fluid --> 
 
     
 
    </nav>