109

我在分页中有这段代码

<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 automargin :0 auto但没有奏效。

4

16 回答 16

157

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/

于 2013-03-07T07:19:39.963 回答
86

对于 Bootstrap 3.0 和 2.3.2,要居中分页,可以将.text-center类应用于包含的div

注意:在标记中应用.pagination类的位置在 Bootstrap 2.3.2 和 3.0 之间发生了变化。请参见下文,或阅读有关分页的 Bootstrap 文档:Bootstrap 3.0Bootstrap 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/

于 2013-10-03T13:41:58.620 回答
70

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

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

有关详细信息,请参阅分页引导 4

于 2017-04-27T14:39:34.867 回答
32

使用 laravel 和 bootstrap 4,有效的解决方案:

<div class="d-flex">
    <div class="mx-auto">
        {{$products->links("pagination::bootstrap-4")}}
    </div>
</div>
于 2018-07-07T09:17:53.777 回答
13

Bootstrap 4 的解决方案

你可以使用它 对齐 使用这个类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>

于 2018-09-26T08:50:09.540 回答
8

前面提到的 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>

或者为了更简洁的设置,省略该style属性并将其放在您的样式表中:

.pagination {
    display: inline-block;
}

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

<div class="text-center">
    <ul class="pagination">
        <li><a href="...">...</a></li>
    </ul>
</div>
于 2014-08-14T14:41:04.530 回答
7

您可以添加自定义 Css:

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

谢谢

于 2014-11-14T09:56:51.297 回答
7

这个这个,它对我有用:

风格

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

.pagination li {
  display: block;
 }

和刀片

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>
于 2018-09-01T04:22:53.477 回答
4

这个对我有用:

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

于 2015-01-06T19:51:05.663 回答
2

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

于 2017-03-18T10:31:40.283 回答
2

在 Boostrap 5 中分页居中

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

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

于 2021-03-07T09:44:59.417 回答
1

在 v4.0.0-alpha.6 中:

<div class="text-center text-sm-right">
    <ul class="pagination d-inline-flex">...</ul>
</div>
于 2017-07-23T01:51:26.270 回答
1

引导程序 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> 
于 2019-02-07T10:46:06.567 回答
0

这个css对我有用:

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}
于 2017-08-31T19:08:40.550 回答
0

如果使用引导程序

在刀片页面中

<div class="pagination justify-content-center">
   {{ $products->links() }}
     //or
   {{ $products->render() }}
</div>
于 2022-01-24T20:33:50.450 回答
-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>

于 2015-11-28T06:29:47.390 回答