不定宽的浮动元素水平居中,纯Css解决方案

最常见的一个需求就是一排翻页按钮要水平居中显示,而且按钮数量不固定,导致总体宽度不固定,看代码,看效果图吧。。。

效果图:

不定宽的浮动元素水平居中,纯css解决方案

css:

.box {
		width:100%;
		height: 26px;
		background:#fff;
		border-bottom:4px solid #000;
}
.box ul {
		float:left;
		list-style:none;
		position:relative;
		left:50%;
		margin:0;
		padding:0;
}
.box ul li {
		display: block;
		float: left;
		list-style: none;
		position: relative;
		right: 50%;
		margin: 0;
		padding: 0;
}
.box ul li a {
		display: block;
		background: #ddd;
		color: #000;
		text-decoration: none;
		line-height: 20px;
		margin: 0 0 0 1px;
		padding: 3px 10px;
}
.box ul li a:hover {
		background:#369;
		color:#fff;
}

html:

<div class="box">
    <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>
        <li>
            <a href="#">7</a>
        </li>
        <li>
            <a href="#">8</a>
        </li>
   </ul>
</div>