Bootstrap Navbar Links Won't Centre [duplicate] - html

Question

This question already has answers here:
Bootstrap Center Navbar Items
(5 answers)
Closed 5 years ago.
I've been trying to centre the links/tabs on my Bootstrap navbar for over a week now and it's doing my head in. Have gone through every similar question on here and absolutely nothing is working. I'm thinking I've doubled up rules somewhere along the line or am not actually targeting the right thing.
It's the basic Bootstrap navbar snippet on Dreamweaver. I've managed to customise colour/font/size, but just can't get the darn thing to sit in the middle.
.navbar.navbar-default {
background-color: #B3C5D7;
background-attachment: fixed;
position: fixed;
width: 100%;
border-radius: 0px;
float: none;
text-align: center;
}
.nav.navbar-nav {
font-size: x-large;
width: 100%;
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">HOME<span class="sr-only">(current)</span></li>
<li>OUR CARE FACTOR</li>
<li>FACILITIES</li>
<li>FUNCTIONS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</nav>

Answer 1

You can do it with the Flexbox:
.navbar {
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
}

Answer 2

Try adding these classes
CSS
.navbar-header
{
float:none;
}
.navbar-nav li
{
float:none;
display:inline-block;
}
hope this helps..

Answer 3

Basically bootstrap using float:left in navbar-header and li so parent div doesn't accept the center alignment or margin auto so update css part which included in following snippet or check fiddle link
In first option you will get nesting classes to look css and html both carefully.
1st option with nesting class to get center
In second option you will get only css changes so check css carefully.
Second option to get center
2nd option to get center
Update css part, I am using inline-flex to get center
.navbar.navbar-default {
background-color: #B3C5D7;
background-attachment: fixed;
position: fixed;
width: 100%;
border-radius: 0px;
float: none;
text-align: center;
}
.nav.navbar-nav {
font-size: x-large;
width: 100%;
display: inline-block;
}
/* Add this css part */
.navbar-header {
float: none; /* Add this */
}
.navbar-nav li {
display: inline-flex; /* Add this */
float: none; /* Add this */
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">HOME<span class="sr-only">(current)</span></li>
<li>OUR CARE FACTOR</li>
<li>FACILITIES</li>
<li>FUNCTIONS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</nav>
.navbar.navbar-default {
background-color: #B3C5D7;
background-attachment: fixed;
position: fixed;
width: 100%;
border-radius: 0px;
float: none;
text-align: center;
}
.nav.navbar-nav {
font-size: x-large;
width: 100%;
display: inline-block;
}
/* Add this css part */
.navbar-header.center-items {
float: none; /* Add this */
}
.navbar-center.navbar-nav li {
display: inline-flex; /* Add this */
float: none; /* Add this */
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header center-items"> <!--Add class -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav navbar-center"> <!--Add class -->
<li class="active">HOME<span class="sr-only">(current)</span></li>
<li>OUR CARE FACTOR</li>
<li>FACILITIES</li>
<li>FUNCTIONS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</nav>