在bootstrap中分页

我有这个代码在分页

<div class="pagination"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> 

但是我的ul是左alignment的。 有什么办法来中心ul wrt的div

我试过margin: auto automargin :0 auto他们,但没有工作。

Bootstrap已经添加了一个3.0的新类。

 <div class="text-center"> <ul class="pagination"> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> 

Bootstrap 4有了新的课程

 <div class="text-xs-center"> <ul class="pagination"> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> 

对于2.3.2

 <div class="pagination text-center"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> 

给这个方法:

 .pagination {text-align: center;} 

这是因为ul正在使用inline-block;

小提琴: http : //jsfiddle.net/praveenscience/5L8fu/


或者如果你想使用Bootstrap的类:

 <div class="pagination pagination-centered"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> 

小提琴: http : //jsfiddle.net/praveenscience/5L8fu/1/

对于Bootstrap 3.0和2.3.2来说,为了分页,可以将.text-center类应用于包含div

注意:标记中的.pagination类的应用在Bootstrap 2.3.2和3.0之间发生了变化。 请参阅下文,或阅读Bootstrap文档分页: Bootstrap 3.0 , Bootstrap 2.3.2 。

Bootstrap 3示例

 <div class="text-center"> <ul class="pagination"> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> 

http://jsfiddle.net/mynameiswilson/eYNMu/

Bootstrap 2.3.2示例

 <div class="pagination text-center"> <ul> <li><a href="?p=0" data-original-title="" title="">1</a></li> <li><a href="?p=1" data-original-title="" title="">2</a></li> </ul> </div> 

http://jsfiddle.net/mynameiswilson/84X3M/

前面提到的Bootstrap 3.0的解决scheme在3.1.1上不适用于我。 分页类有display:block<li>元素有float:left ,这意味着仅仅在text-center包装<ul>是行不通的。 我不知道如何或何时在3.0和3.1.1之间改变了。 无论如何,我已经使<ul>使用display:inline-block代替。 代码如下:

 <div class="text-center"> <ul class="pagination" style="display:inline-block"> <li><a href="...">...</a></li> </ul> </div> 

或者为了更清洁的设置,省略style属性并将其放在样式表中:

 <style> .pagination { display: inline-block; } </style> 

然后使用之前build议的标记:

 <div class="text-center"> <ul class="pagination"> <li><a href="...">...</a></li> </ul> </div> 

这个对我有用:

 <div class="text-center"> <ul class="pagination pagination-lg"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> </a> </li> </ul> 

你可以添加自定义的Css:

 .pagination{ display:table; margin:0 auto; } 

谢谢

为了在BS4中集中分页,应该在ul添加justify-content-center

 <nav aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> 

有关更多信息,请参阅分页引导程序4 。

我不能得到任何build议的解决scheme与Bootstrap 4 alpha 6,但下面的变化终于让我一个中心的分页栏。

CSS覆盖:

 .pagination { display: inline-flex; margin: 0 auto; } 

HTML:

 <div class="text-center"> <ul class="pagination"> <li><a href="...">...</a></li> </ul> </div> 

包装div上没有displaymargin或类别的其他组合似乎工作。

在v4.0.0-alpha.6:

 <div class="text-center text-sm-right"> <ul class="pagination d-inline-flex">...</ul> </div> 

这个CSS适合我:

 .dataTables_paginate { float: none !important; text-align: center !important; } 
 You can use the below code to center pagination 
 .pagination-centered { text-align: center; } 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="pagination-centered"> <ul class="pagination"> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div>