垂直居中导航中的Font Awesome图标

Question

我正在尝试使图标垂直居中，以便与导航链接的其余部分保持一致，但无论如何我都无法使其工作。

HTML

<nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <img src="img/logo.png" class="navbar-brand" href="index.html"> 
     </div> 
     <div class="collapse navbar-collapse" id="nav"> 
      <ul class="nav navbar-nav navbar-left"> 
      <li><span class="fa fa-phone"> +62 202 555 0117</span></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Work</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </nav> 

CSS

nav.navbar { 
padding: 12px; 
} 
span.fa.fa-phone { 
    color: #fff; 
    vertical-align: middle; 
} 

Answer 1

1. 导航栏的链接有padding: 15px财产。所以你需要将这个属性应用到电话号码。

2. 为此设置特殊类。使用的

   <li class="phone"><span class="fa fa-phone"></span> +62 202 555 0117</li>

   代替<li><span class="fa fa-phone"> +62 202 555 0117</span></li>。

3. 使用<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
   而不是<img src="img/logo.png" class="navbar-brand" href="index.html">

4. 拨动钮必须使用id从<div class="collapse navbar-collapse" id="nav">为data-target属性的值。

请查看结果。这是你想要达到的目标吗？

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'); 
 

 
.navbar { 
 
    padding: 12px; 
 
} 
 
.nav .phone { 
 
    color: #fff; 
 
    padding: 15px; 
 
}

<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="nav"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
     <li class="phone"><span class="fa fa-phone"></span> +62 202 555 0117</li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Work</a></li> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>