CODEWITHSUNDEEP
htmlcssasp.netasp.net-mvctwitter-bootstrap
Eugene
Eugene

Reputation: 219

Center nav-bar (ASP.NET MVC)

I have a navbar, and the elements need to be centered within the navbar. I have attempted to do this with margin, however, it is not working. Any suggestions on how I can achieve this with CSS?

This is the code:

<div class="navbar ">
    <div class="container" style="margin-left: 160px;">
        <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>
            <[email protected]("Видео Интрервью", "Index", "Home", new {area = ""}, new {@class = "navbar-brand"})-->
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Компании", "Index", "Companies")</li>
                <li>@Html.ActionLink("Подтвержденные", "Approved", "Interwier")</li>
                <li>@Html.ActionLink("Приглашения", "Individual", "InvitationMails")</li>
                <li>@Html.ActionLink("Создать интервью", "WelcomeScreen", "Questions")</li>
                <li>@Html.ActionLink("Просмотр", "Viewing", "Interwier")</li>
                <li>@Html.ActionLink("Входящие", "Incoming", "Interwier")</li>
                <li>@Html.ActionLink("Архив", "Archive", "Interwier")</li>
            </ul>
            @Html.Partial("_LoginPartial2")
        </div>
    </div>
</div>

These are the CSS classes:

.navbar-nav {
    float:none;
    margin: 0 auto;
    display: table;
    table-layout: fixed;
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    color: #000000;
    font-size: 18px;
}

Upvotes: 2

Views: 1573

Answers (1)

Shivani Shanishchara
Shivani Shanishchara

Reputation: 132

Add new div header_box before your navbar-header. CSS for that will be position:relative; Hope that'll work.

Upvotes: 3

Related Questions