html - 如何使我的导航栏居中？

Question

我进行了多次尝试，但都失败了，这是我创建的代码，但我找不到将导航栏居中的方法。这是我的代码

<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Models</a>
<ul>
  <li><a href="#">Lite</a></li>
  <li><a href="#">Domestic</a></li>
  <li><a href="#">Regional</a></li>
  <li><a href="#">Continental</a></li>
  <li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Technical</a></li>
<li><a href="#">Other Products</a>
<ul>
  <li><a href="#">EMA Loader</a></li>
  <li><a href="#">Portable Airstairs</a></li>
</ul>
</li>

<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ's</a></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>

请尝试帮助我，因为我正在制作的网站要求导航栏位于中心

Answer 1

请找到更新后的代码，它对我来说效果很好，希望它能解决您的问题。

<div id="nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Models</a>
<ul>
  <li><a href="#">Lite</a></li>
  <li><a href="#">Domestic</a></li>
  <li><a href="#">Regional</a></li>
  <li><a href="#">Continental</a></li>
  <li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Benefits</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Technical</a></li>
<li><a href="#">Other Products</a>
<ul>
  <li><a href="#">EMA Loader</a></li>
  <li><a href="#">Portable Airstairs</a></li>
</ul>
</li>

<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ's</a></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>