使分页在自举中居中

问题描述 投票：95回答：14

我在分页中有此代码

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

html css twitter-bootstrap css3
14个回答
150
投票
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/
1
投票
在v4.0.0-alpha.6中：

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

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或类的其他组合似乎都无效。
0
投票
此CSS对我有用：

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

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>

-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>
86
投票
对于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/
36
投票
要使分页在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以获取更多信息。
12
投票
将laravel与bootstrap 4一起使用，有效的解决方案：

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

9
投票

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>
7
投票
您可以添加您的自定义CSS：

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

谢谢
7
投票
先前提到的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>
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> 


      

      
      
      

      

        

          

            

              
4
投票

              
            

          

        

        
这对我有用：
样式：
.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

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


      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.