html - 如何居中对齐 CSS 导航菜单？

Question

有人可以帮帮我吗？我正在尝试将我的导航菜单居中。我尝试了不同的东西，但没有任何效果，我真的不知道该怎么做。我真的很感激帮助。提前致谢!

nav {
display: inline-block;
list-style-type: none;
float: left;
width: 100%;
height: 102px;
text-align: center;
}

nav > ul {
float:right;
width:100%;
height:102px;
background:#222;
border-radius: 10px 10px 0px 0px;
}   

nav > ul > li {
float:left;
width:auto;
margin-right:10px;
line-height:102px;
}   

nav > ul li a {
padding:50px;
color:white;
font-family:helvetica, sans-serif;
}

nav > ul > li > ul {
background:#222;
opacity:0;
transition:opacity 1s;
-webkit-transition:opacity 1s;
-moz-transition:opacity 1s;
-o-transition:opacity 1s;
-ms-transition:opacity 1s;
border-radius: 0px 0px 10px 10px;
}   

nav > ul > li:hover > ul {
opacity:1;
}

HTML

<div>
 <nav>
  <ul>
   <li> <a href="#">Hjem</a>
    <ul>
     <li><a href="#">Sub1</a></li>
     <li><a href="#">Sub2</a></li>
     <li><a href="#">Sub3</a></li>
    </ul>
   </li>
   <li><a href="#">Bilder</a></li>
   <li><a href="#">Video</a></li>
   <li><a href="#">Design</a></li>
  </ul>
 </nav>
</div>

Answer 1

这是我做的。

#outer{
  width:100%;
  height: 102px;
  text-align: center;
  background:#222;
  border-radius: 10px 10px 0px 0px;
}
nav {
  display: inline-block;
  list-style-type: none;
  margin: 0 auto;
}

nav > ul > li {
  float:left;
  width:auto;
  margin-right:10px;
  line-height:102px;
}   

nav > ul li a {
  padding:50px;
  color:white;
  font-family:helvetica, sans-serif;
}

nav > ul > li > ul {
  background:#222;
  opacity:0;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;
  -moz-transition:opacity 1s;
  -o-transition:opacity 1s;
  -ms-transition:opacity 1s;
  border-radius: 0px 0px 10px 10px;
}   

nav > ul > li:hover > ul {
  opacity:1;
}

你只需要给 div 一个 ID。

<div id="outer">