我在分页中有这个代码
<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左对齐了。有没有办法集中ul wrt div？
我尝试了margin: auto auto和margin :0 auto，但没有效果。
答案 0 :(得分：150)
<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>
<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>
<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;
或者如果您想使用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>
答案 1 :(得分：86)
对于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>
答案 2 :(得分：27)
要将分页集中在BS4中，应在justify-content-center中添加ul：
<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>
有关详细信息，请参阅Pagination Bootstrap 4。
答案 3 :(得分：6)
前面提到的Bootstrap 3.0解决方案在3.1.1上对我不起作用。分页类具有display:block，<li>元素具有float:left，这意味着仅将<ul>包裹在text-center中是行不通的。我不知道在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>
然后使用之前建议的标记：
<div class="text-center">
<ul class="pagination">
<li><a href="...">...</a></li>
</ul>
</div>
答案 4 :(得分：6)
Bootstrap 4的解决方案
您可以使用它
对齐
使用此类NSNumber
使用flexbox utilities更改分页组件的对齐方式。
并详细了解pagination
justify-content-center
答案 5 :(得分：5)
您可以添加自定义Css：
.pagination{
display:table;
margin:0 auto;
}
谢谢
答案 6 :(得分：5)
使用带有启动程序4的laravel，有效的解决方案：
<div class="d-flex">
<div class="mx-auto">
{{$products->links("pagination::bootstrap-4")}}
</div>
</div>
答案 7 :(得分：4)
它对我有用：
<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>
答案 8 :(得分：2)
这对我有用：
样式：
.pagination {
display: flex;
justify-content: center;
}
.pagination li {
display: block;
}
和刀片：
<div class="pagination">
{{ $myCollection->render() }}
</div>
答案 9 :(得分：1)
在v4.0.0-alpha.6中：
<div class="text-center text-sm-right">
<ul class="pagination d-inline-flex">...</ul>
</div>
答案 10 :(得分：1)
在 Boostrap 5 中分页居中
<ul class=" pagination justify-content-center >";
使用： https://getbootstrap.com/docs/5.0/components/pagination/ 和 https://getbootstrap.com/docs/5.0/utilities/flex/
答案 11 :(得分：0)
我无法获得任何与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或类的其他组合似乎无效。
答案 12 :(得分：0)
这个CSS对我有用：
.dataTables_paginate {
float: none !important;
text-align: center !important;
}
答案 13 :(得分：0)
引导程序4：
<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
<li class="page-item">...</li>
</ul>
答案 14 :(得分：-2)
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>