在网上我们下载的jQuery插件(分页),引入的js和css文件之后,简单的修改一下jQuery对分页的显示要求后,我们可以看到在指定的<div>区域中出现分页的组件。
<body>
<div id="callBackPagination" class="piece" >
<div id="mainContent">
页面显示数据部分
</div>
<div id="callBackPager">
分页组件显示位置
</div>
</div>
</body>
分页组件能够显示,但是分页组件一般是左对齐的,而且分页组件的长度,随着页数从个位数到十位数的增长,长度也是可以改变的,我们设置固定长度,然后利用margin属性达到居中的想法明显是不可以的。
于是,我想到了用<nav>标签,然后用<nav>标签包住分页组件出现的div区域,设置居中属性:
<body>
<div id="callBackPagination" class="piece" >
<div id="mainContent">
</div>
<nav style="text-align: center"> <!-- 分页居中放置-->
<div id="callBackPager"></div>
</nav>
</div>
</body>
这时运行代码,分页组件正常居中,样式兼容。