Positionierung Bild in Ankertag mit HTML und CSS

Question

Hallo, ich bin mit der Standard-Bootnavigationsleiste Vorlage:

<nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <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> 
       <a class="navbar-brand" id="brand-container" href="#"> 
       <img id="brand-in-navbar" alt="NBA" src="nba.png" /> 
       </a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
       <form class="navbar-form navbar-left" role="search"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
       </form> 
       <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav> 

Der Teil arbeite ich an ist:

<a class="navbar-brand" id="brand-container" href="#"> 
    <img id="brand-in-navbar" alt="NBA" src="nba.png" /> 
</a> 

Die CSS Ich habe für das img ist:

#brand-in-navbar { 
    width: auto; 
    height: 50px; 
} 

das Problem hier ist, das logo i richtig positioniert ist, verwendet ist nicht und es wird aus dem bord des Anker-Tag ERS:

Ich mag das Logo in der linken oberen Ecke positionieren, so dass der Boden ist nicht aus der Navigationsleiste kleben. Weiß jemand was ich falsch mache?

Answer 1

Gibt es einen Grund, dass Sie versuchen, ein Hintergrundbild auf einem tatsächlichen Bild zu setzen?

Sie müssen das nicht tun.

Wenn Ihre HTML ist dies, und das Bild src gilt ...

<a class="navbar-brand" id="brand-container" href="#"> 
    <img id="brand-in-navbar" alt="NBA" src="nba.png" /> 
</a> 

Sie können das Bild nur die Größe, zum Beispiel ...

#brand-in-navbar { 
    height: 30px; 
    width: auto; 
} 

justieren Sie einfach die Höhe erforderlich.

Siehe auch diese - http://www.bootply.com/0jZyA6mx3F#

Answer 2

Für den Anfang der Hintergrund Sachen fallen, da Sie bereits <img> verwenden. Als nächstes ist Ihr <a> auf display: block; oder display: inline-block; mit den Abmessungen des Logos eingestellt? Wenn nicht, versuchen Sie das und es sollte richtig ausgerichtet werden.

Wenn es immer noch Probleme gibt, überprüfen Sie die Auffüllung und Ränder für beide Elemente. Es würde dir helfen, dein CSS zu sehen, aber das sollte dich auf den richtigen Weg bringen.

Answer 3

Versuchen Sie dieses:

.brand-in-navbar{ 
    height:100%; 
}