web-dev-qa-db-fra.com

Centrer la pagination dans le bootstrap

J'ai ce code en 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>

Mais ma ul est laissée alignée. Est-il possible de centrer la ul par div?

J'ai essayé margin: auto auto et margin :0 auto mais ils n'ont pas fonctionné.

htmlcsstwitter-bootstrapcss3
92
user192362127

Bootstrap a ajouté une nouvelle classe à partir de 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 a nouvelle classe

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

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

Donne cette voie:

.pagination {text-align: center;}

Cela fonctionne parce que ul utilise inline-block;

Fiddle: http://jsfiddle.net/praveenscience/5L8fu/

Ou si vous souhaitez utiliser la classe de 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/

149
Praveen Kumar Purushothaman

Dans Bootstrap 3.0 et 2.3.2, pour centrer la pagination, la classe .text-center peut être appliquée au contenant div.

Remarque: Où appliquer la classe .pagination dans le balisage a changé entre Bootstrap 2.3.2 et 3.0. Voir ci-dessous ou lisez les documents Bootstrap sur la pagination: Bootstrap 3.0 , Bootstrap 2.3.2 .

Exemple de 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/

Exemple de 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/

86
Ben

Pour centrer la pagination dans BS4, ajoutez justify-content-center dans 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>

Voir Pagination Bootstrap 4 pour plus d'informations.

21
NoobTW

Les solutions mentionnées précédemment pour Bootstrap 3.0 ne fonctionnaient pas pour moi sous 3.1.1. La classe de pagination a display:block et les éléments <li> ont float:left, ce qui signifie que le fait d'encapsuler le <ul> dans text-center seul ne fonctionne pas. Je ne sais pas du tout comment et quand les choses ont changé entre 3.0 et 3.1.1. Quoi qu’il en soit, j’avais demandé au <ul> d’utiliser plutôt le display:inline-block. Voici le code:

<div class="text-center">
    <ul class="pagination" style="display:inline-block">
        <li><a href="...">...</a></li>
    </ul>
</div>

Ou, pour une configuration plus propre, omettez l’attribut style et placez-le dans votre feuille de style:

<style>
    .pagination {
        display: inline-block;
    }
</style>

Et utilisez ensuite le balisage précédemment suggéré:

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

solution pour Bootstrap 4

Tu peux l'utiliser Alignment Utilisez cette classe justify-content-center

Modifiez l'alignement des composants de pagination avec utilitaires flexbox .

et en apprendre davantage à ce sujet 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>

4
core114

Vous pouvez ajouter votre css personnalisé:

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

Je vous remercie

4
Ferhat KOÇER

Ça marche pour moi:

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

Avec laravel avec bootstrap 4, la solution qui a fonctionné:

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

Cela a fonctionné pour moi:

Style :

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

.pagination li {
  display: block;
 }

Et lame :

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

Dans v4.0.0-alpha.6:

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

bootstrap 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>
0
Eassa Nassar

Aucune des solutions proposées ne fonctionnait avec Bootstrap 4 alpha 6, mais la variante suivante m'a finalement permis de placer une barre de pagination centrée.

Remplacement CSS:

.pagination {
  display: inline-flex;
  margin: 0 auto;
}

HTML:

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

Aucune autre combinaison de display, margin ou class sur la division d’emballage ne semble fonctionner.

0
Emma Burrows

Ce css fonctionne pour moi:

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