Html 在引导程序中居中分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15265253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Centering the pagination in bootstrap
提问by user192362127
I have this code in pagination
我在分页中有这个代码
<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>
But my ulis left aligned. Is there any way to center the ulwrt div?
但我ul的左对齐。有什么办法可以让ulwrt居中div吗？
I tried margin: auto autoand margin :0 autothey but didn't work.
我试过了margin: auto auto，margin :0 auto但没有奏效。
回答by Praveen Kumar Purushothaman
Bootstrap has added a new class from 3.0.
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 has new class
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>
For 2.3.2
对于 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>
Give this way:
给这个方法：
.pagination {text-align: center;}
It works because ulis using inline-block;
它有效，因为ul正在使用inline-block;
Fiddle: http://jsfiddle.net/praveenscience/5L8fu/
小提琴：http: //jsfiddle.net/praveenscience/5L8fu/
Or if you would like to use Bootstrap's class:
或者，如果您想使用 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>
Fiddle: http://jsfiddle.net/praveenscience/5L8fu/1/
小提琴：http: //jsfiddle.net/praveenscience/5L8fu/1/
回答by Ben
For both Bootstrap 3.0 and 2.3.2, to center pagination, the .text-centerclass can be applied to the containing div.
对于 Bootstrap 3.0 和 2.3.2，为了使分页居中，.text-center类可以应用于包含的div。
Note:Where to apply the .paginationclass in the markup has changed between Bootstrap 2.3.2 and 3.0. See below, or read the Bootstrap docs on pagination: Bootstrap 3.0, Bootstrap 2.3.2.
注意：在标记中应用.pagination类的位置在 Bootstrap 2.3.2 和 3.0 之间发生了变化。请参阅下文，或阅读有关分页的 Bootstrap 文档：Bootstrap 3.0, Bootstrap 2.3.2。
Bootstrap 3 Example
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/
http://jsfiddle.net/mynameiswilson/eYNMu/
Bootstrap 2.3.2 Example
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>
回答by NoobTW
To centered the pagination in BS4, should add justify-content-centerin ul:
要集中在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>
See Pagination Bootstrap 4for further information.
有关更多信息，请参阅分页引导程序 4。
回答by manelseo
Using laravel with bootstrap 4, the solution that worked:
将 laravel 与 bootstrap 4 一起使用，有效的解决方案：
<div class="d-flex">
<div class="mx-auto">
{{$products->links("pagination::bootstrap-4")}}
</div>
</div>
回答by core114
solution for Bootstrap 4
Bootstrap 4 的解决方案
You can use it
Alignmentuse this class justify-content-center
你可以使用它
Alignment使用这个类justify-content-center
Change the alignment of pagination components with flexbox utilities.
使用flexbox 实用程序更改分页组件的对齐方式。
and learn more about it pagination
并进一步了解其分页
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<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>回答by curtisdf
The previously mentioned solutions for Bootstrap 3.0 did not work for me on 3.1.1. The pagination class has display:block, and the <li>elements have float:left, which means merely wrapping the <ul>in text-centeralone does not work. I have no idea how or when things changed between 3.0 and 3.1.1. Anyway, I had make the <ul>use display:inline-blockinstead. Here's the code:
前面提到的 Bootstrap 3.0 解决方案在 3.1.1 上对我不起作用。分页类有display:block，<li>元素有float:left，这意味着仅将<ul>intext-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>
Or for a cleaner setup, omit the styleattribute and put it in your stylesheet instead:
或者为了更简洁的设置，省略该style属性并将其放在您的样式表中：
.pagination {
display: inline-block;
}
And then use the markup previously suggested:
然后使用之前建议的标记：
<div class="text-center">
<ul class="pagination">
<li><a href="...">...</a></li>
</ul>
</div>
回答by Ferhat KO?ER
You can add your custom Css:
您可以添加自定义 CSS：
.pagination{
display:table;
margin:0 auto;
}
Thank you
谢谢
回答by Andrew
This this, it worked for me:
这个，它对我有用：
Style:
风格：
.pagination {
display: flex;
justify-content: center;
}
.pagination li {
display: block;
}
And blade:
和刀片：
<div class="pagination">
{{ $myCollection->render() }}
</div>
回答by naty
It works for me:
这个对我有用：
<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>
回答by Cam Tullos
In v4.0.0-alpha.6:
在 v4.0.0-alpha.6 中：
<div class="text-center text-sm-right">
<ul class="pagination d-inline-flex">...</ul>
</div>
