导航栏按钮不垂直对齐

Question

我一直在玩bootstrap来设置导航栏，我希望它是。 我很努力，因为您可能会在我的代码中看到，在此菜单中将所有内容垂直居中。我通过玩保证金做了一些平均修复，但我无法修复按钮。 我相信有一个简单的解决方案，position:relative有一切中心，但我找不到它。

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

感谢您的帮助！

Answer 1

updated codepen

只需添加按钮内navbar-rightli。没有需要修改你的CSS。

例如片断

.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>