如何将导航栏置于我的网站中心?

时间:2013-01-29 05:00:34

标签: css

我正在使用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;
}

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

这取决于HTML结构,但这可行。

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

答案 2 :(得分:0)

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

我不得不弄乱填充物,但这会使我的导航栏居于中心