垂直居中導航中的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>