Center image in Nav menu bar

Asked

Viewed 1,027 times

5

How do I center an image in the Menu bar? When I talk about centering, I mean not the image in the middle of the bar, but whatever position it is in, that has the same "measurements" for the top and bottom. How do I define it in mine css? Below the code of my menu. I would like the image to be before the "Name of My Company" and not after, as it is.

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <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>
            <img src="~/Images/Logomarca_mini.jpg" />
            @Html.ActionLink("Nome da Minha Empresa", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

2 answers

1

Here resolved:

.....
</button>

  <div class="navbar-header">
     <a class="navbar-brand" href="#">
        <img alt="Brand" src="~/Images/Logomarca_mini.jpg">
     </a>
  </div>
.....

1

Set the elements on the same level as the image with display: inline-block and line-height with the same container size

http://jsfiddle.net/4hr29t6w/2/

for the button to be right, in the example set a height and margins according to the container size

Browser other questions tagged

You are not signed in. Login or sign up in order to post.