居中文本旁边的图像引导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

回答

相关问题