2017-08-25 17 views
0

Ich habe ein Logo, das innerhalb der Navbar ist und ich habe Text, der daneben ist. Ich möchte den Text vertikal zentrieren, so dass er sich in der Mitte des Logos befindet. Wenn ich versuche, a.navbar-brand einzustellen, bewegt sich alles. Müsste ich den Code @Html.ActionLink mit einem separaten span oder div Tag umgeben und dann darauf verweisen, dass innerhalb der CSS?Zentrierung Text neben einem Bild bootstrap navbar

enter image description here

 <div class="navbar-header"> 
      <a class="navbar-brand"> 
       <img alt="tribal_logo" src="~/Content/Images/tribal_logo2.gif" /> 
      </a> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      @Html.ActionLink("Fishing and Hunting License Program", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
+0

Überprüfung dieses [Vertically Text neben einem Bild ausrichten?] (Https://stackoverflow.com/questions/ 489340/vertikal-Ausrichtung-Text-neben-einem-Bild) Dies wird Ihnen helfen. –

Antwort

0

Versuche Action .btn-Link-Klasse geben und dann die Höhe der navbar anpassen, wenn mehr Höhe.

0

Versuchen Sie, wie etwas unterhalb

HTML

<div class="navbar"> 
    <div class="image col-md-2">asasda<img src=""></div> 
    <div class="desc col-md-10"> 
    <p class="item-desc-text">Text.</p> 
    </div> 
</div> 

CSS

.desc { 
    height:150px; 
    position: relative; 
    border: 1px solid #ccc; 
    box-sizing: border-box; 
} 
.item-desc-text { 
    text-align: left; 
    position: absolute; 
    top: 40%; 
    transform: translateY(-50%); 
}