The problem of the center of UL Li in CSS

An obvious problem with Li's Float:left method is that it cannot be centered (horizontally) and can only be centered by using Padding-left or Margin-right methods.

Always thought to the UL Li Center alignment already mastered. But the recent project to discover the previous Float:left method of Li is obviously a problem, that is, can not be centered (horizontal), can only use the Padding-left or Margin-right method to fix its center. However, this may not be consistent with the display of widescreen and narrow screens.
Using this method is mainly to use Li's floating fixed width to achieve, Li's default display for block, this attribute to inline can realize this UL Li Center problem

<style type= "Text/css" >
#bNav {
margin-top:10px;
Background: #D9EBF5;
Text-align:center;
}
#bNav ul{
PADDING:4PX 0;
margin:0;
Overflow:hidden;
}
#bNav ul li{
Display:inline;
padding:0;
}
</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
<li></li>
<li><a href= "info.aspx?info_id=10" title= "declaration" >law
<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>