My navbar has elements that I want to center within it, but using margin hasn't been successful. Do you have any suggestions on how I can achieve this alignment using CSS?
This is the code snippet:
<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>
<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11303c3c5159657c7d3f507265787e7f5d787f7a">[email protected]</a>("Video Interview", "Index", "Home", new {area = ""}, new {@class = "navbar-brand"})-->
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Companies", "Index", "Companies")</li>
<li>@Html.ActionLink("Approved", "Approved", "Interview")</li>
<li>@Html.ActionLink("Invitations", "Individual", "InvitationMails")</li>
<li>@Html.ActionLink("Create Interview", "WelcomeScreen", "Questions")</li>
<li>@Html.ActionLink("Viewing", "Viewing", "Interview")</li>
<li>@Html.ActionLink("Incoming", "Incoming", "Interview")</li>
<li>@Html.ActionLink("Archive", "Archive", "Interview")</li>
</ul>
@Html.Partial("_LoginPartial2")
</div>
</div>
</div>
Here are the specific 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;
}