麻烦垂直居中链接响应自助增加navbar

Question

我一直在我的头撞在桌子上现在一会儿在这个。我猜测有一个简单的解决方案或黑客，我错过了。我已经尝试调整链接的填充和边距，李和他们周围的容器。我希望它们在导航栏中保持垂直居中，而不管屏幕大小。现在，当视口大小调整时，它们会上下移动。我的代码如下：

/* Style for Navbar/Header */ 
 
nav.navbar { 
 
    padding: 0 1% 0 1%; 
 
} 
 

 
.navbar, 
 
.dropdown-menu { 
 
    background-image: url(../images/pw_maze_black_@2X.png); 
 
} 
 

 
.navbar .navbar-nav > li > a:hover, 
 
.navbar .navbar-nav > li > a:focus, 
 
.dropdown-menu > li > a:hover, 
 
.dropdown-menu > li > a:focus { 
 
    background-color: #656864 !important; 
 
    color: white; 
 
} 
 

 
ul.nav.navbar-nav.navbar-right.collapse.navbar-collapse { 
 
    background: red; 
 
    margin-top: 5%; 
 
} 
 

 
.navbar .navbar-nav > li > a { 
 
    font-family: "bodoni mt condensed", serif; 
 
    font-size: 3.6vw; 
 
    color: #a5a7a4; 
 
    padding-top: 60px; 
 
    padding-bottom: 60px; 
 
} 
 

 
.dropdown-menu > li > a { 
 
    line-height: 100%; 
 
    font-family: "bodoni mt condensed", serif; 
 
    font-size: 2.5vw; 
 
    color: #a5a7a4; 
 
} 
 

 
.links-container { 
 
    
 
} 
 

 
#logo-bar { 
 
    width: 100%; 
 
} 
 

 
.navbar-toggle { 
 
    background-color: #a5a7a4; 
 
    position: static; 
 
    padding: 2%; 
 
    margin-top: 61px; 
 
    margin-right: 40px; 
 
    margin-bottom: 0; 
 

 
} 
 

 
div.navbar-header.nav.navbar-nav { 
 

 
} 
 

 
.icon-bar { 
 
    background-color: white; 
 
} 
 

 
/* End of navbar style */

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-static-top"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header col-sm-4"> 
 
       <a class="" href="index.html"><img id="logo-bar" class='col-sm-4' src="images/logo-bar.svg" alt="Arrow's Edge Design Logo"></a> 
 

 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="sr-only">Toggle Navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
      </div> 
 
      <div class="links-container"> 
 
      <ul class="nav navbar-nav navbar-right collapse navbar-collapse"> 
 
       <li><a href="index.html" class="option">Home</a></li> 
 
       <li><a href="our-services.html" class="option">Our Services</a></li> 
 
       <li><a href="#" class="option" data-toggle="dropdown">About Us<span class="caret"></span></a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="blog.html">Blog</a></li> 
 
         <li><a href="our-work.html">Our Work</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="https://www.facebook.com/arrowsedgedesign/">Facebook</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="contact-us.php" class="option">Contact Us</a></li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
    </nav> 
 

 
    <!-- end of HTML for navbar -->

Answer 1

您可以通过更改导航栏元素行高实现这一目标。

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

更改50px值为任何你想要的每个观点和文字应始终是垂直居中。