妙味课堂

今天被网友问到一个效果：让翻页代码在页面上永远居中，无论页码数量增多或是减少。
效果图如下：

我最近用 JS 写特效比较多，所以看到这个问题，我第一感觉就是用 JS 方式实现，思路是：

先给翻页代码的父级元素一个居中样式：margin: 0 auto;

然后使用 JS 去动态获取翻页代码内所有元素的宽度，再把这个宽给父级，实现居中。

用这个思路实现了以后，感觉有点不妥，应该有更简单的解决方法才对，后来跟一位在酷6上班的朋友说起这个效果，

她说用CSS实现很简单呀，不需要用JS的，她的代码如下：

XHTML部分：

<div id=”page”>
 <a href=”#”>上一页</a>
 <a href=”#”>1</a>
 <a href=”#”>2</a>  
 <a href=”#”>3</a>
 <a href=”#”>下一页</a>
</div>

CSS部分：

#page{ text-align:center; height:30px; line-height:30px; }
a { padding: 3px 5px; font-family: Arial; font-size: 14px; color: #333; background: #eee; border: 1px solid #ccc; margin-right: 2px; text-decoration: none; }
a:hover { background: red; color: #fff; border: 1px solid #000;}

事后，她笑我：你是对着 JS 代码太久了吧？简单的问题你都用复杂的思路去解决？？

很惭愧，也很受用……向这位朋友学习～··写下此篇，以提醒自己今后解决问题的思路一定要化繁为简。

>>点击这里查看效果