尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    div+css控制水平居中的翻页元素

    作者:redroom  来源:redroom  发表时间:2009-8-16 11:27:52  点击:3812
    DIV网页代码:
    <div class="pager">
    	<a href="" class="first">first</a>
    	<a href="" class="prev">prev</a>
    	<a href="">1</a>
    	<strong>2</strong>
    	<a href="">3</a>
    	<span>...</span>
    	<a href="">8</a>
    	<a href="" class="next">next</a>
    	<a href="" class="last">last</a>
    </div>
    
    CSS样式部分:
    .pager {
    	width:800px;
    	border:1px dotted #ccc;
    	text-align:center;
    }
    .pager * {
    	display:-moz-inline-box;  // 此属性会造成text-align、text-indent等无效的问题,不建议使用。
    	-moz-box-align:center;  // 解决上个属性造成的text不能垂直居中的问题
    	display:inline-block;
    	padding:0 12px;
    	height:28px;
    	line-height:28px;
    	border:1px solid #ccc;
    }
    .pager span {
    	border-color:white;
    	padding:0 3px;
    }
    .pager strong {
    	border-color:red;
    }
    .pager .last {
    	background:red;
    }
    

    这种方法有个局限:因为使用了-moz-inline-box属性,所以不能设置text-align,text-indent。因此不能用background进行图片替换。

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗