css - 如何在我的网站中居中导航栏？

Question

我正在使用 Weebly 创建一个网站，并且我一直在尝试修改导航栏，使其显示为居中而不是左对齐。我根本不知道任何代码，但我找到了导航代码，我想知道我可以改变什么来使栏居中。谢谢！

#nav-wrap .nav {
float:left;
}

#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
background:url(saperator-h.png) repeat-x bottom;
padding-bottom:40px;
}

#nav-wrap .container ul {
list-style: none;
}

#nav-wrap .container ul li {
list-style: none;
float: left;
background:url(nav-saperator.png) no-repeat right center;
margin-right: 10px;
padding-right: 25px;
}

#nav-wrap .container ul > li:last-child, #nav-wrap .container ul span:last-child li {
background:none;
}

#nav-wrap .container ul li a {
display: block;
line-height:14px;
border: 0;
outline: 0;
list-style-type: none;
text-transform:uppercase;
padding:5px;
margin-bottom:4px;
}

#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color:#000;
}

Answer 1

#topnav a {
float: left;
display: block;
color: #fff;
font-size: 1.2em;
text-decoration: none;
padding: 11px 60px 60px 15px;
border: 0;
outline: 0;
text-transform: uppercase;

我不得不弄乱填充物，但这使我的导航栏在weebly中居中

Answer 2

#nav-wrap {
position: relative;
width: /*set width, can't be 100% obivously if you want it centered */
margin: auto;
}

这是一个猜测，我们看不到任何 HTML ，将其应用于整个导航栏的容器

Answer 3

这取决于 HTML 结构，但这可以工作。

#nav-wrap .container ul {
  display:block;
  width:auto;
  margin:auto;
}