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>

check this [Vertically align text next to an image?](https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) this will help you. — Sikandar_ali, Aug 25 '17 at 19:54

score 0 · Answer 1 · answered Aug 25 '17 at 19:57

0

Try giving actionlink .btn-link class and then adjust the height of navbar if having more height.

answered Aug 25 '17 at 19:57

athultuttu

192
3
15

score 0 · Answer 2 · answered Aug 25 '17 at 20:01

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

centering text next to an image bootstrap navbar

2 Answers2