Question

如何让css设计的导航栏居中显示

这个代码显示的导航栏居左，怎么让他居中显示 就是打开后导航条跟首页居中的图片对其， 在中间显示！

<p align="center"><img src="../aiqwang.jpg" width="857" height="125" border="0" align="middle" /></p>
<p>
<style type="text/css">
.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
</style>

</p>
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
就是希望代码达到类似淘宝店铺导航，上面是图片 然后下面分类导航，第一个导航和上面的图片对其！在网站居中显示 现在图片已经居中了 就差导航条了 刚接触这个 代码看不懂 最好能给我上面的代码改成居中的 然后讲下心得 胡乱复制和广告就别来了 能帮忙的上！谢谢啦
代码居中算是搞定了 用3楼的代码自己调整下百分比 然后有个新问题，就是导航和上面图片间距怎么调整呀 我想让导航和上面的图片挨着 中间不要空隙

Answer 1

　　1、首先设置
　　body { margin:0 auto; text-align:center; }

　　2、再设置1个BOX让他居中，包裹即可
　　如：.box{margin:0 auto; width:100%;}

　　3、包裹此导航条所有代码
　　<div class="box">导航条所有代码</div>
　　完成居中

Answer 2

让一个【固定宽度】的元素居中，比如一个div：
div.nav{ margin: 0 auto;}

Answer 3

.test ul{list-style:none; float:left; position:relative; left:50%;}
.test ul li{float:left; position:relative; right:50%;}
试试

追问

这个代码可以实现导航居中，很不错！可惜和我居中的图片对不到，非常感谢 我在调试看看

Answer 4

迟点在写...

Answer 5

.test ul{list-style:none;text-align:center;}