Bootstrap MVC How to center a brand

Question

i am trying to make the brand in the center of the navbar and i cant really make it. i would be happy for some help. Thanks

<div class="navbar navbar-inverse navbar-fixed-top" style="background-color:#f7e351; background-image:linear-gradient(#f7e351,#f7e351,#f7e351); border-color:#e7c02f;">
        <div class="container" style="background-color:#f7e351;">
            <div class="navbar-header" style="background-color:#f7e351;">
                <button type="button" style="background-color:#f7e351;" 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("XXX", "Index", "XXX", new { area = "" }, new { @class = "navbar-brand" })
            </div>
             @Html.ActionLink("Brand", "Brand", "Home", new { area = "" }, new { @class = "navbar-brand active" })
            <div class="navbar-collapse collapse">
                @Html.Partial("_LoginPartial2")
            </div>
        </div>
    </div>

Answer 1

I have created a Bootply for you so that you can see a visual of this working as expected.

HTML:

<div class="navbar navbar-inverse navbar-fixed-top" style="background-color:#f7e351; background-image:linear-gradient(#f7e351,#f7e351,#f7e351); border-color:#e7c02f;">
    <div class="container" style="background-color:#f7e351;">
        <div class="navbar-header" style="background-color:#f7e351;">
            <button type="button" style="background-color:#f7e351;" 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>
          <a class="navbar-brand">Center</a>
        </div>
         <a class="navbar-brand brand">Brand</a>
    </div>
</div>

CSS:

.brand{
    position: absolute;
    left: 48.5%;
}

The words are overlapped because you didn't state your question which element with the navbar-brand class you wanted centered so I did both of them.

Hope this helps.