在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 auto和margin :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>
前面提到的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">«</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">»</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上没有display ， margin或类别的其他组合似乎工作。
在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="ajax/libs/twitter-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>
