在引导程序中将分页居中

我在分页中有这段代码

<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却一无所获。有什么办法可以使ulwrt 居中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。

注意：在Bootstrap 2.3.2和3.0之间，在标记中应用.pagination类的位置已更改。参见下文，或阅读有关分页的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/

要集中在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>

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

结合使用laravel和bootstrap 4，有效的解决方案是：

            <div class="d-flex">
                <div class="mx-auto">
                    {{$products->links("pagination::bootstrap-4")}}
                </div>
            </div>

Bootstrap 4的解决方案

您可以使用它 Alignment 使用此类justify-content-center

使用flexbox实用工具更改分页组件的对齐方式。

并详细了解它的分页

<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>

前面提到的Bootstrap 3.0解决方案在3.1.1上不适合我。分页类具有display:block，<li>元素具有float:left，这意味着仅将<ul>in 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属性，然后将其放在样式表中：

.pagination {
    display: inline-block;
}

然后使用先前建议的标记：

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

您可以添加自定义CSS：

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

谢谢

这对我有用：

风格：

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

和刀片：

<div class="pagination">                                              
  {{ $myCollection->render() }}
</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>

在v4.0.0-alpha.6中：

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

引导程序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> 

我无法获得任何与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>

没有其他组合display，margin或在包装的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>