很久以前做的css按钮完美距中效果,主要是用了display的inline-block的属性。比较简单所以就发上来跟大家分享！效果图如下
按钮背景素材
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>分页距中display:inline-block;完美解决</title>
<style>
*{margin:0;padding:0;}
.page{width:100%;marign:0 auto;height:22px;font-size:12px;text-align:center;line-height:22px;height:22px;overflow:hidden;margin-top:5px;}
.page a,.page a b,.page a.crent,.page a.crent b{background:url(http://i1173.photobucket.com/albums/r595/charrysong/upload/page_bg.gif) no-repeat; cursor:pointer;height:22px;display:inline-block;}
.page a{background-position:right -54px;color:#000;text-decoration:none;margin-right:5px;}
.page a:hover{background-position:right -135px;}
.page a:hover b{background-position:left -108px;color:#ff0000;}
.page a b{background-position:0 0px;padding:0 10px 0 10px;font-weight:normal;}
.page a.crent,.page a.crent:hover{background-position:right -81px;}
.page a.crent b,.page a.crent:hover b{background-position:0 -27px;color:#fff;}
</style>
</head>
<body>
<div class="page"><a href="#"><b>上一页</b></a><a href="#" class="crent"><b>1</b></a><a href="#"><b>2</b></a><a href="#"><b>3</b></a><a href="#"><b>4</b></a><a href="#"><b>下一页</b></a></div>
<div class="page"><a href="#"><b>上一页</b></a><a href="#"><b>1</b></a><a href="#" class="crent"><b>2</b></a><a href="#"><b>3</b></a><a href="#"><b>4</b></a><a href="#"><b>下一页</b></a></div>
<div class="page"><a href="#"><b>上一页</b></a><a href="#"><b>1</b></a><a href="#"><b>2</b></a><a href="#" class="crent"><b>3</b></a><a href="#"><b>4</b></a><a href="#"><b>下一页</b></a></div>
<div class="page"><a href="#"><b>上一页</b></a><a href="#"><b>1</b></a><a href="#"><b>2</b></a><a href="#"><b>3</b></a><a href="#" class="crent"><b>4</b></a><a href="#"><b>下一页</b></a></div>
</body>
</html>
好了!大家点击运行看效果吧！
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)