在引导程序中居中分页答案

【问题标题】：Centering the pagination in bootstrap在引导程序中居中分页
【发布时间】：2022-01-25 04:33:50
【问题描述】：

我在分页中有这段代码

<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，但没有成功。

【问题讨论】：

使用 Bootstrap 3，您必须将 <ul class="pagination">...</ul> 包装在 <div class="text-center"></div> 中。
Bootstrap 有多个版本...如果您能提及您使用的具体版本会很有帮助。

标签： html twitter-bootstrap css

【解决方案1】：

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/

【讨论】：

@Praveen .pagination-centered 在 Bootstrap 3 中被移除，使用 .text-center 代替。不过，我没有反对：P
我不知道什么时候开车投票变得很酷，但是您的第一个答案对我有用，所以请投票。
引导程序 4 应该是 <div class='d-flex'><ul class='pagination mx-auto'>...
请将<ul class="pagination pagination-lg justify-content-center">... 添加到解决方案中。 getbootstrap.com/docs/4.1/components/pagination/#alignment
当前接受的答案是错误的。这在某些时候显然是正确的，但现在是错误的，至少对于 BS 4.x 而言。现在正确的答案是在 ul 中添加 justify-content-center：

【解决方案2】：

对于 Bootstrap 3.0 和 2.3.2，为了使分页居中，可以将 .text-center 类应用于包含 div。

注意：在 Bootstrap 2.3.2 和 3.0 之间，在标记中应用 .pagination 类的位置发生了变化。请参见下文，或阅读有关分页的 Bootstrap 文档：Bootstrap 3.0、Bootstrap 2.3.2。

引导 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/

引导 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】：

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

更多信息请参见Pagination Bootstrap 4。

【讨论】：

应该是答案

【解决方案4】：

将 laravel 与 bootstrap 4 结合使用，可行的解决方案：

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

【讨论】：

使用 Symfony 和 bootstrap4，也能正常工作！谢谢！

【解决方案5】：

Bootstrap 4 解决方案

你可以使用它对齐使用这个类justify-content-center

用flexbox utilities改变分页组件的对齐方式。

并了解更多信息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>

【讨论】：

【解决方案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 属性并将其放在您的样式表中：

.pagination {
    display: inline-block;
}

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

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

【讨论】：

【解决方案7】：

这个这个，它对我有用：

风格：

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

.pagination li {
  display: block;
 }

和刀片：

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>

【讨论】：

使用您第一个定义的设置，我创建了下面的类并将其添加到我的分页上方的包装 div 中为我解决了问题。 .cs-list-paginator { display: flex; justify-content: center; }

【解决方案8】：

您可以添加自定义 Css：

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

谢谢

【讨论】：

【解决方案9】：

它对我有用：

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

【讨论】：

【解决方案10】：

我无法获得任何建议的解决方案来使用 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 上的类的其他组合似乎不起作用。

【讨论】：

【解决方案11】：

在 Boostrap 5 中分页居中

        <ul class=" pagination justify-content-center >";

使用： https://getbootstrap.com/docs/5.0/components/pagination/ 和 https://getbootstrap.com/docs/5.0/utilities/flex/

【讨论】：

【解决方案12】：

在 v4.0.0-alpha.6 中：

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

【讨论】：

【解决方案13】：

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

这个 css 对我有用：

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}

【讨论】：

【解决方案15】：

如果使用引导

在刀片页面中

<div class="pagination justify-content-center">
   {{ $products->links() }}
     //or
   {{ $products->render() }}
</div>

【讨论】：

【解决方案16】：

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>

【讨论】：

当引导程序中有帮助程序可以解决问题时，不需要自定义类。