当前位置:首页 > 技术文章 > css > CSS不定宽度分页如何居中的3种方法
CSS不定宽度分页如何居中的3种方法
文章来源:本站原创  浏览次数:192  发布日期:2013-02-05

前言:有个客户最近有个需求,需要分页的样式居中显示,本来很简单的需求,但是因为有些地方有点复杂,所以,还是找了好多方法最后才比较完美的实现。在这里把找到方法列出来一下,最完美的是第一种方法。

1、第一种方式,利用position:relative;(相对浮动),思路是这样的,“.page”向右浮动50%,是以外层“.pagelist”的宽度为标准的;内层(如LI)向左浮动50%,是以层“.page”的宽度为标准的,这里无需定义内层的宽度。这样算是一个小技巧,让“.page”居中了。

CSS代码:

.pagelist{ text-align:center; height:22px;line-height:22px; overflow:hidden; width:100%;}

.pagelist .page{position:relative;left:50%;float:left;}

.page li{position:relative;left:-50%;display: inline;float:left; padding-right:4px;}

2、第二种方式很常见,就是设置ul标签的文本居中,然后再设置li的显示方式为inline显示就可以了。这种的弊端是li下面的子标签不能设置浮动,不能设置成block

#cha ul {  text-align:center;  }

#cha li{ display:inline; padding:0 8px;}

3、第三种方式借用JS来实现,原理很简单,就是用JS计算出page的实际宽度后,赋值宽度给它,然后pagelist加上margin:0 auto;即可,但是这个也是有个弊端,就是JS的执行时在页面加载完之后,所以你可能会看到一开始并不是居中的,等到页面加载完成,执行了JS之后,那个分页的样式才会跳到居中那里,不是很友好。

鉴于此所以使用了第一种方式来实现,客户也是很满意这种效果的。

附上截图:


原文来自:CSS不定宽度分页如何居中的3种方法 http://www.redyun.net/technology/22.html

红云案例Case