ブートストラップでロゴとナビゲーションリンクを整列しようとしています4

Question

私のロゴにナビゲーションリンクを合わせる際に問題があります。現在のところ、私のロゴはナビゲーションの中心にあり、何らかの理由でリンクが隣のロゴの上に表示されるのではなく、その上に表示されています。下の画像は、私はそれがこのように見えるように取得しようとしています

私の問題を示しています。ここ

私のヘッダコードです：

<header id="header" role="banner"> 
      <div class="header-inner"> 
       <nav class="navbar"> 
        <div class="container text-xs-center"> 
         <div class="navbar-nav"> 
          <a href='{{ url("/") }}' class="nav-item-link nav-item nav-link">Home</a> 
          <a href="#" class="nav-item-link nav-item nav-link">Our Team</a> 
          <a href="#" class="nav-item-link nav-item nav-link">Media</a> 
          <a href='{{ url("/") }}' class="nav-item nav-link"><img src="./images/zipzap.jpg" class="img-fluid" alt=""></a> 
          <a href="#" class="nav-item-link nav-item nav-link">About Us</a> 
          <a href='{{ url("/contact") }}' class="nav-item-link nav-item nav-link">Contact Us</a> 
          <a href='{{ url("/donate") }}' class="nav-item-link nav-item nav-link" id="donate">Support Us</a> 
         </div> 
        </div> 
       </nav> 
      </div> 
     </header> 

と私のCSS：

a.nav-item{ 
    color:#000; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-weight:bold; 
    padding:20px; 
} 

a.nav-item:hover{ 
    color:#000; 
} 

a.nav-item:hover{ 
    color:#000; 
} 

.navbar-nav{ 
    display:inline-block; 
} 

#donate{ 
    background-color: #7ED321; 
    border-radius: 8px; 
    padding: 15px; 
} 

#header{ 
    width:100%; 
} 

.header-inner{ 
    padding: 18px 0; 
    width:100%; 
} 

助けていただけたら幸いです！

Answer 1

は問題が解決しない場合は、その後、所望の垂直位置にそれを得るためにline-heightプロパティを追加してみてください

a.nav-item{ 
    color:#000; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    font-weight:bold; 
    padding:20px; 
    vertical-align:center; 
} 

をしよう。