关于ul li做导航水平居中和垂直居中的问题深入研究

　　对于ul居中的问题之前也没有太注重过，基本上都是知道了总宽度，用一个PADDING-LEFT搞定，可是这样做始终不是办法，这次又做了一个站，没事好好研究研究。我原来写导航都是为了代码简洁直接使用<ul class="menu"><li></li><li></li><li></li></ul> 这样的形式，现在问题来了，如果我的导航栏目并不多，而页面总体的宽度是1004px的话那么这个将必定是左对齐，在网上找了一些代码研究了下，发现一个问题：

　　我为了节省代码都是直接写的<ul>对于这个当总的宽度一定的时候，就没办法居中了，因为我用了FLOAT:left。对于这个只需要在<ul>外面增加一个<div>并且将ul的宽度设置为80%或者其它一个小于总宽度即可解决问题。将我的一个导航代码贴出来如下：

----------------------以下是代码--------------------------
<div class="menuDiv">
<ul class="menu">
  <li><a href="index.asp">首　　页</a></li>
  <li><a href="news.asp">新闻中心</a></li>
  <li><a href="about.asp?id=1">经营理念</a></li>
  <li><a href="about.asp?id=2">服务项目</a></li>
  <li><a href="about.asp?id=3">最新理念</a></li>
  <li><a href="about.asp?id=4">妈妈问答</a></li>
  <li><a href="about.asp?id=5">招商加盟</a></li>
  <li><a href="about.asp?id=6">招贤纳士</a></li>
  <li><a href="about.asp?id=7">联系我们</a></li>
  <li class="none"><a href="wsyy.asp">网上预约</a></li>
 </ul>
</div>

样式如下：
.menuDiv{ margin:0 auto;width:100%; background:#1bac8d;}
.menu{ width:85%; line-height:35px;margin:0 auto;}
.menu li{ float:left; background:url(line_01.gif) right no-repeat; width:70px; margin-left:12px;}
.menu .none{ background:none;}
.menu A{ color:#FFF; font-size:14px;}

这样即可解决导航中ul li垂直居中和水平居中的问题