响应式引导导航栏中的链接垂直居中问题

Question

我已经在桌子上敲了一段时间。我猜我缺少一个简单的解决方案或技巧。我尝试调整链接、li 和它们周围的容器的填充和边距。无论屏幕大小如何，我都希望它们在导航栏中保持垂直居中。现在，当调整视口大小时，它们会上下移动。我的代码如下：

/* 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

您可以通过更改导航栏元素的 line-height 来实现。

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

为每个视点更改 50px 值，文本应始终垂直居中。