使分页 div 居中
Posted
技术标签:
【中文标题】使分页 div 居中【英文标题】：Centering the pagination div 【发布时间】：2012-02-10 17:19:09 【问题描述】：通常分页是这样的：
什么时候我会添加类似的东西：
<td align="center">
或<center><div id="pagination></div></center>
看起来像这样：
我也尝试过使用style="margin: 0px auto;"，但它不起作用。
代码如下：
<table>
<tr>
<td align="center">
<div id="pagination"></div>
</td>
</tr>
</table>
是的，我也尝试在 div 上使用此属性（包括text-align: center;）。
CSS 部分：
.jPaginate
height:34px;
position:relative;
color:#a5a5a5;
font-size:small;
width:100%;
.jPaginate a
line-height:15px;
height:18px;
cursor:pointer;
padding:2px 5px;
margin:2px;
float:left;
.jPag-control-back
position:absolute;
left:0px;
.jPag-control-front
position:absolute;
top:0px;
.jPaginate span
cursor:pointer;
ul.jPag-pages
float:left;
list-style-type:none;
margin:0px 0px 0px 0px;
padding:0px;
ul.jPag-pages li
display:inline;
float:left;
padding:0px;
margin:0px;
ul.jPag-pages li a
float:left;
padding:2px 5px;
span.jPag-current
cursor:default;
font-weight:normal;
line-height:15px;
height:18px;
padding:2px 5px;
margin:2px;
float:left;
ul.jPag-pages li span.jPag-previous,
ul.jPag-pages li span.jPag-next,
span.jPag-sprevious,
span.jPag-snext,
ul.jPag-pages li span.jPag-previous-img,
ul.jPag-pages li span.jPag-next-img,
span.jPag-sprevious-img,
span.jPag-snext-img
height:22px;
margin:2px;
float:left;
line-height:18px;
ul.jPag-pages li span.jPag-previous,
ul.jPag-pages li span.jPag-previous-img
margin:2px 0px 2px 2px;
font-size:12px;
font-weight:bold;
width:10px;
ul.jPag-pages li span.jPag-next,
ul.jPag-pages li span.jPag-next-img
margin:2px 2px 2px 0px;
font-size:12px;
font-weight:bold;
width:10px;
span.jPag-sprevious,
span.jPag-sprevious-img
margin:2px 0px 2px 2px;
font-size:18px;
width:15px;
text-align:right;
span.jPag-snext,
span.jPag-snext-img
margin:2px 2px 2px 0px;
font-size:18px;
width:15px;
text-align:right;
这是 Firebug 的 html 输出：
<div id="pagination" class="jPaginate" style="padding-left: 71px; ">
<div class="jPag-control-back">
<a class="jPag-first" style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); ">First</a>
<span class="jPag-sprevious">«</span>
</div>
<div style="overflow-x: hidden; overflow-y: hidden; width: 101px; ">
<ul class="jPag-pages" style="width: 99px; ">
<li><a style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); ">1</a>
</li>
<li>
<span class="jPag-current" style="color: rgb(0, 99, 220); background-color: rgb(241, 224, 198); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(141, 4, 4); border-right-color: rgb(141, 4, 4); border-bottom-color: rgb(141, 4, 4); border-left-color: rgb(141, 4, 4); ">2</span>
</li>
<li>
<a style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); ">3</a>
</li>
<li><a style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); ">4</a>
</li>
</ul>
</div>
<div class="jPag-control-front" style="left: 176px; ">
<span class="jPag-snext">»</span>
<a class="jPag-last" style="color: rgb(255, 0, 0); background-color: rgb(212, 192, 161); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(98, 36, 0); border-right-color: rgb(98, 36, 0); border-bottom-color: rgb(98, 36, 0); border-left-color: rgb(98, 36, 0); ">Last</a>
</div>
</div>
【问题讨论】：
请提供css部分。 @Avinash Done，还包括了萤火虫输出。 【参考方案1】：我会给你一个链接，我从那里得到我的解决方案，然后是我的源代码的相关部分。
链接：
Centering menus
我们需要做的就是将 ul 标记包含在一个宽度为 100% 且溢出设置为隐藏的外部容器中。 然后 ul 标记使用相对位置设置样式，并以 50% 的左侧位置向左浮动。 最后，li 标签也设置了相对位置样式，向左浮动，但这次的右侧位置为 50%。 ...正如他们所说，这就是所需要的。kquote
我的 HTML：
<div class="menuholder fleft">
<ul class="mainmenu fleft">
<li class="fleft"><a href="home.html">Home</a></li>
<li class="fleft"><a href="b.html">B</a></li>
</ul>
</div>
我的 CSS：
.menuholder
clear: both;
width: 100%;
overflow: hidden;
.mainmenu
padding: 0;
margin: 0 auto;
list-style-type: none;
position: relative;
left: 50%;
.mainmenu li
position: relative;
right: 50%;
.mainmenu a
width: auto;
display: block;
.fleft
float: left;
【讨论】：
【参考方案2】：我想向您推荐我的右对齐方法。首先，您应该将您的 div 包装在另一个具有“pagination-wrapper-right”类的 div 中。之后编写正确的 CSS 样式。 就我而言，我将向您展示我的 scss 样式))
<div class="col-xs-6 col-sm-6 col-md-6 pagination">
<div class="pagination-wrapper-right">
<div class="page-pagination"></div>
</div>
</div>
哪里 div.page-pagination - jPagination 块 div.pagination-wrapper-right - 对齐的包装器
我们可以写css样式之后：
.pagination-wrapper-right
clear: both;
float: right;
.jPaginate
padding-left: 62px;
display: inline-block;
padding-right: 62px;
自己试试，祝你好运
【讨论】：
【参考方案3】：尝试在 CSS 中编辑分页类并将其左右边距设置为自动，而不是创建表格
看这里
http://www.w3.org/Style/Examples/007/center.en.html
【讨论】：
【参考方案4】：你可以像这样修改 jPaginate 类::
.jPaginate
height:34px;
position:relative;
color:#a5a5a5;
font-size:small;
width:auto;
display:inline-block;
【讨论】：
以上是关于使分页 div 居中的主要内容，如果未能解决你的问题，请参考以下文章
Datatables：在drawCallBack之后用Angular编译表格HTML时如何使分页工作？