How to center my Nav Bar? - html

Question

I have had many attempts but I have failed on all attempts, This is my code I've created but I cannot find a way to center my navigation bar. Here is my code
<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>About</li>
<li>Models
<ul>
<li>Lite</li>
<li>Domestic</li>
<li>Regional</li>
<li>Continental</li>
<li></li>
</ul>
</li>
<li>Benefits</li>
<li>Extras</li>
<li>Technical</li>
<li>Other Products
<ul>
<li>EMA Loader</li>
<li>Portable Airstairs</li>
</ul>
</li>
<li>Testimonials</li>
<li>FAQ's</li>
</ul>
</nav>
</div>
<style type="text/css">
#primary_nav_wrap {
margin-top: 15px;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin-right: auto;
margin-left: auto;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #75D1FF;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
</style>
Please try and help me as the website I'm making requires the nav bar to be in the center

Answer 1

Please find the updated code, it works well for me, hope it will resolve your issue.
<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>About</li>
<li>Models
<ul>
<li>Lite</li>
<li>Domestic</li>
<li>Regional</li>
<li>Continental</li>
<li></li>
</ul>
</li>
<li>Benefits</li>
<li>Extras</li>
<li>Technical</li>
<li>Other Products
<ul>
<li>EMA Loader</li>
<li>Portable Airstairs</li>
</ul>
</li>
<li>Testimonials</li>
<li>FAQ's</li>
</ul>
</nav>
</div>
<style type="text/css">
#primary_nav_wrap {
margin-top: 15px;
text-align:center;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
padding: 0;
margin:0px auto;
display:inline-block;
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin-right: auto;
margin-left: auto;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #75D1FF;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
</style>

Answer 2

Here are two lines to add to your css:
#primary_nav_wrap {
margin-top: 15px;
width: 800px;
margin: 0 auto;
}
adding the width and margin: 0 auto will help you. Only adding the margin: 0 auto will not work it needs the width to work.

Answer 3

Simple solution:
#nav{
width:100%;
text-align:center;
}
#primary_nav_wrap {
margin: 15px auto 0 auto;
width:780px;
}
http://jsfiddle.net/e8rqxbe5/1/

Answer 4

Other solution is:
#primary_nav_wrap {
display: table;
margin: 0 auto;
margin: 15px auto 0 auto;
}
#primary_nav_wrap ul {
display: table-cell;
list-style: none;
position: relative;
padding: 0;
}
http://jsfiddle.net/u5xko1dn/1/

Answer 5

#nav{
width:100%;
text-align:center;
}

Answer 6

#primary_nav_wrap {
margin-top: 15px;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
color: #333;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 32px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin-right: auto;
margin-left: auto;
padding: 0
}
#primary_nav_wrap ul li.current-menu-item {
background: #ddd
}
#primary_nav_wrap ul li:hover {
background: #75D1FF;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px
}
/* center */
#primary_nav_wrap {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
//width: 100%;
//height: auto;
//background-color: lightgrey;
}
ul {
//background-color: cornflowerblue;
//padding: 1rem;
//margin: 1rem;
-webkit-align-self: center;
align-self: center;
}
/* || center */
<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>About</li>
<li>Models
<ul>
<li>Lite</li>
<li>Domestic</li>
<li>Regional</li>
<li>Continental</li>
<li></li>
</ul>
</li>
<li>Benefits</li>
<li>Extras</li>
<li>Technical</li>
<li>Other Products
<ul>
<li>EMA Loader</li>
<li>Portable Airstairs</li>
</ul>
</li>
<li>Testimonials</li>
<li>FAQ's</li>
</ul>
</nav>
</div>