分页居中实现

分页居中实现有两要点：

1、外框加上text-align：center属性

2、内部元素a标签要加上display：inline-block

以下是自己项目中分页实现代码

1、HTML

 <div class="fenye clearfix">
            <a href="#" class="prev prev-del">上一页</a>
            <div class="yema">
                <a href="#" class="page pagenow">1</a>
                <a href="#" class="page">2</a>
                <a href="#" class="page">3</a>
            </div>
            <a href="#" class="prev">下一页</a>
  </div>

2、CSS

.fenye{ width:100%; margin:26px auto; text-align:center; }
.fenye a{ display:inline-block; height:24px; line-height:24px; font-size:14px; color:#414141; margin-right:10px; border:1px solid #707070; font-family:"microsoft yahei"; }
.fenye a{ _display:inline; }
.fenye .prev{ width:72px;  }
.fenye .prev-del{ color:#d7d7d7; border:1px solid #d7d7d7; }
.yema{ display:inline-block; }
.yema .page{ width:24px; }
.yema a:hover{ background:#e24e2b; color:#fff; }
.yema .pagenow{ background:#e24e2b; color:#fff; }

最后如果要兼容ie6的话那么需加上 _display:inline 所以CSS代码部分才会有.fenye a{ _display:inline; }这部分。

2015年11月24日

1、发现上面的方法还存在问题：在ie6、ie7下上一页和下一页会另起一行。 主要是因为HTML中上一页、下一页中间加了个div而引起的，还得在加上：.fenye{ *display:inline; }

2、为了代码的简洁可以吧div去掉：如下

HTML

 <div class="fenye clearfix">
            <a href="#" class="prev prev-del">上一页</a>
            <a href="#" class="page pagenow">1</a>
            <a href="#" class="page">2</a>
            <a href="#" class="page">3</a>
            <a href="#" class="prev">下一页</a>
  </div>

CSS

.fenye{ width:100%; margin:26px auto; text-align:center; }
.fenye a{ display:inline-block; width:24px;  height:24px; line-height:24px; font-size:14px; color:#414141; margin-right:10px; border:1px solid #707070; font-family:"microsoft yahei"; }
.fenye a{ *display:inline; }
.fenye .prev{ width:72px;  }
.fenye .prev-del{ color:#d7d7d7; border:1px solid #d7d7d7; }
.fenye a:hover{ background:#e24e2b; color:#fff; }
.fenye .pagenow{ background:#e24e2b; color:#fff; }