复制代码
.pager {
text-align: center;/*====让列表项内容居中放====*/
padding: 0;
margin: 20px;
list-style: none outside none;
}
.pager li {
display: inline-block;/*===改变列表项显示方式为行内块===*/
margin: 0;
padding: 0;
}
起到列表水平居中的效果，我们靠的就是上面的两句代码“text-align: center”和“display: inline-block”，但大家写的时候一定不能放借位置哟，前一句是放在“ul”中，后一句是放在“li”中，我们来看看效果：
从上图中我们很明显的看到了，ＩＥ6-7下是无法排在一行中显示的，那么我们现在来看如何处理他们的兼容问题。我们使用Hack来，让IE6-7下按另外一种方法显示：
复制代码
[code] * html .pager li { display: inline; }
*+html .pager li { display: inline; }
.pager li a {
zoom: 1;
}
[/code]现在我们在来看一下，加上以上代码后的效果：
现在在所有浏览器下都能水平居中了。只是部分浏览器不支持CSS3的属性，这些我们无需理会他了。最后为了让其更美丽一点，我在这里还使用了css3的其他属性，比如说text-shadow、box-shadow等等。
那么一个和W3cplus站点一样的分页效果就做好了，感兴趣的话你也可以动手一试。大家一起来看一下最终效果吧：
