versucht, Nav-Links mit Logo in Bootstrap 4

Question

auszurichten Ich habe Probleme mit der Ausrichtung meiner Navigation Links mit meinem Logo. Derzeit befindet sich mein Logo im Mittelpunkt meiner Navigation und die Links werden aus irgendeinem Grund über meinem Logo und nicht daneben angezeigt. Das Bild unten zeigt mein Problem

Ich versuche, es zu bekommen wie folgt aussehen:

hier ist mein Header-Code:

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

und meine 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%; 
} 

jede Hilfe wäre willkommen!

Answer 1

versuchen

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

zu tun Wenn das nicht, dann funktioniert line-height Eigenschaft versuchen Sie es in die gewünschte vertikale Position zu bringen.