如何使我的导航栏居中？

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

这里有两行要添加到您的 css:

 #primary_nav_wrap {
   margin-top: 15px;
   width: 800px;
   margin: 0 auto;
 }

添加宽度和边距：0 auto 会帮助你。仅添加 margin: 0 auto 将不起作用，它需要宽度才能起作用。

Answer 2

简单的解决方案：

#nav{
    width:100%;
    text-align:center;
}
#primary_nav_wrap {
    margin: 15px auto 0 auto;
    width:780px;
}

http://jsfiddle.net/e8rqxbe5/1/

Answer 3

其他解决方案是：

#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 4

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

Answer 5

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

<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>

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"><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>

如何使我的导航栏居中？

How to center my Nav Bar?

html

css

navigation

nav

centering