CSS居中一个float浮动元素的核心：

       让最外面的层相对定位，left等于50%，然后内部嵌套层也使用相对定位且left设为-50%，这样的效果就是内层相对整行为水平居中；

 

#wrapper {

float: left;
position: relative;
text-align: left;
left: 50%;
}
#wrapper ul {
list-style: none;
position: relative;
left: -50%;
}
#wrapper ul li {
float: left;
position: relative; /* For IE6 */
}
<div id="wrapper">
<ul>
<li><a href="#">Button 1</a> </li>
<li><a href="#">Button 2's a bit longer</a> </li>
<li><a href="#">Butt 3</a> </li>
<li><a href="#">Button 4</a> </li>
</ul>
</div>