一直以为对ul li居中对齐已经掌握了。但最近做项目时发现之前li的float:left方法显然有一个问题，就是无法居中（水平），只能使用padding-left或margin-right的方法方法来固定其居中。

但这样可能在宽屏与窄屏的显示不一致。

使用这种方法主要是利用li的浮动固定宽度来实现，li的默认display为block，将其这个属性改为inline便可实现这种ul li居中的问题

<style type="text/css">

#bNav{

margin-top:10px;

background:#D9EBF5;

text-align:center;

}

#bNav ul{

padding:4px ;

margin:;

overflow:hidden;

}

#bNav ul li{

display:inline;

padding:;

}
</style>

<div id="bNav" class="bNav">

 <ul>

  <li><a href="index.aspx" title="Home">Home</a></li>

  <li>|</li>

  <li><a href="info.aspx?info_id=8" title="About Us">About Us</a></li>

  <li>|</li>

  <li><a href="info.aspx?info_id=9" title="Department Design">Department Design</a></li>

  <li>|</li>

  <li><a href="info.aspx?info_id=10" title="Law Declaration">Law Declaration</a></li>

  <li>|</li>

  <li><a href="info.aspx?info_id=11" title="Contact Us">Contact Us</a></li>

  <li>|</li>

  <li><a href="info.aspx?info_id=12" title="Application Agent">Application Agent</a></li>

  <li>|</li>

  <li><a href="info.aspx?info_id=13" title="Job Services">Job Services</a></li>

  <li>|</li>

  <li><a href="info.aspx?info_id=14" title="Apply Link">Apply Link</a></li>

 </ul>

</div>

注意其中 ul最好要加margin:0;padding:0;，主要是为了兼容各浏览器。