centering text next to an image bootstrap navbar

Question

I have an logo that is within the navbar and I have text that is next to it. I would like to vertically center the text so that it is in the middle of the logo. When I try to adjust a.navbar-brand everything moves. Would I need to surround the @Html.ActionLink code with a separate span or div tag and then reference that within the css?

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

Answer 1

尝试提供actionlink .btn-link类，如果高度更高，请调整导航栏的高度。

Answer 2

Try something like below

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