在我们日□□□□常生活中，上网冲浪□□几乎是每□□□天都做的□□□□一件事情，浏览新闻，查找信息，购物等，或多或少□□□的都会看□□到网页中◢内容列表◆下方都有◥一行分页□□□列表，一般这种□□□分页列表◎包含有首□□□页，上一页，具体页，下一页，最后一页□□等按钮，大多数分❖页列表中◤的上一页□□□下一页是□□用的“<”，“>”左右箭头◣表现的，但是也有✦些网站上□□□的上一页□□下一页是□□□□由设计师●画的箭头□□来表示的，而这种箭◆头就不是□□单纯的能□□□□用左右箭□□□头来实现□□□□了。
 
最近工作♦中就遇到□□了一个比□□□□较符合网□□□□站主题的□□□□分页列表，设计师的□□功力很深◆厚，设计稿中□□□□的分页列□□□表如下图：  
由图可以◈看到，有具体的□□□□分页项，还有上一□□□□页下一页□□□□和最后一□□□页（图中 12），下面是具□□□体实现这□□□□个分页列□□□表的代码：

 
一开始的□□□□时候看到□□□这个分页□□□列表，就想着不□□需要把箭□□头切出来，直接用左□□右箭头就▽能实现，不就是给□□□□个颜色，字号，加粗嘛，然后发现□□□□事实上有□□点想当然◥了

用左右箭□□□头实现的□□□上一页下□□□一页长得□□□□和设计稿□□□上的不一◇样，于是想着□□□把箭头单□□独切出来♦放进去，来实现设□□□□计稿上的△上一页下◆一页按钮，说干就干：

 
如此便实现了设计稿上的分页列表了。
 

虽说是实□□现了，但是我又□□□□想能不能□□□□把箭头写□□到背景里□□□□面去，让代码页□□□□面保持相□□对美观些◆呢，于是问题□□□□来了

 
上一页下□□□一页与具□□□□体页不是◥垂直居中□□□□的，看着有点□□不对劲，然后就是□□调整了，margin啊，padding啊，vertiacl-align:middle都尝试过，达不到想▲要的效果，既然css调整不过□□□□来，我就想是□□□不是a标签的问◤题，是不是空◤的a标签和有□□内容的a标签放到□□□一起会有丨某种差别，于是我又□□开始尝试，加个空格：

很不给面✦子，完全没有◤反应。我又想，是不是单□□□纯的空格□□键敲出来•的空格是□□□不是被判□□定为空了，那么换成□□□空格符   试试看，

 
嚯，居中了!
 

至此，分页列表♦的问题基□□本解决了，然后就是□□□给出当前□□□□页的表现□□状态，调整间距□□□了，最终比较□□□□完美的实▼现了设计□□□□稿上的分□□□页列表：

最终实现的代码如下：

代码的世□□界很奇妙，很多工程□□□师研发了□□□各种美妙·的库类插□□件，各种代码□□□□框架，就像是通□□□向罗马的□□条条大路□□□很是神奇◉壮阔，而开发中▲的某些BUG就像大路□□□边上的野○花一样，能引起你□□□□的兴趣，让你发动□□□□思维去研□□□□究去发现，从而产生◥一些别致◥的情绪。我想这也丨是代码世□□界中的美☆妙之一吧。
作者：BG大游集团前端工程师乐文庆