居中文本旁邊的圖像引導navbar

我有一個標誌是在導航欄內，我有它旁邊的文字。我想垂直居中放置文字，使其位於徽標的中間。當我嘗試調整a.navbar-brand時，一切都在移動。我是否需要將@Html.ActionLink代碼與單獨的span或div標記環繞在一起，然後在css中引用它？居中文本旁邊的圖像引導navbar

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

來源

2017-08-25 kevorski

檢查此[垂直對齊旁邊的文字到圖像？]（https://stackoverflow.com/questions/ 489340/vertical-align-text-next-an-image）這會幫助你。 –

先給ActionLink的.btn鏈接類，然後如果有更多的高度調整導航欄的高度。

來源

2017-08-25 19:57:38 athultuttu

嘗試類似下面

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%); 
}

來源

2017-08-25 20:01:46 webCoder

居中文本旁邊的圖像引導navbar

回答

相關問題