Centrer la pagination dans bootstrap

100

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 mon ulreste aligné. Existe-t-il un moyen de centrer le ulWRT div?

J'ai essayé margin: auto autoet margin :0 autoils n'ont pas fonctionné.

html twitter-bootstrap css user192362127
la source
12
Avec Bootstrap 3, vous devrez envelopper l' <ul class="pagination">...</ul>intérieur d'un fichier <div class="text-center"></div>.
caw
Bootstrap a plusieurs versions ... Il serait utile que vous puissiez mentionner la version spécifique que vous utilisez.
Tariqul Islam le

Réponses:

153

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

Donnez de cette façon:

.pagination {text-align: center;}

Cela fonctionne car ulutiliseinline-block;

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

Violon: http://jsfiddle.net/praveenscience/5L8fu/1/

Praveen Kumar Purushothaman
la source
9
@Praveen .pagination-centré a été supprimé dans Bootstrap 3, utilisez plutôt .text-center. Pas de vote négatif de ma part, cependant: P
Kevin C.
2
Je ne sais pas quand le vote négatif au volant est devenu cool, mais votre première réponse fonctionne pour moi, alors ayez un vote favorable.
David Harbage
5
Bootstrap 4 devrait être<div class='d-flex'><ul class='pagination mx-auto'>...
Lysergia25
8
Ajoutez <ul class="pagination pagination-lg justify-content-center">...aux solutions s'il vous plaît. getbootstrap.com/docs/4.1/components/pagination/#alignment
Денис
5
La réponse actuellement acceptée est fausse. C'était évidemment vrai à un moment donné, mais c'est faux maintenant, du moins pour BS 4.x. La bonne réponse est maintenant d'ajouter justify-content-center à ul: <ul class = "pagination justify-content-center">
FlashJordan
86

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

Remarque: l' emplacement où appliquer la classe .pagination dans le balisage a changé entre Bootstrap 2.3.2 et 3.0. Voir ci-dessous, ou lire la documentation Bootstrap sur la pagination: Bootstrap 3.0 , Bootstrap 2.3.2 .

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

Ben
la source
4
Bootstrap devrait également documenter cela.
ryenus
47

Pour centrée la pagination dans BS4, devrait ajouter justify-content-centerdans 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">
Développer l'extrait

Voir Pagination Bootstrap 4 pour plus d'informations.

NoobTW
la source
2
devrait être la réponse
nam vo
18

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

            <div class="d-flex">
                <div class="mx-auto">
                    {{$products->links("pagination::bootstrap-4")}}
                </div>
            </div>
Manelseo
la source
en utilisant Symfony et bootstrap4, ça marche aussi! Merci !
Roubi
12

solution pour Bootstrap 4

Vous pouvez l'utiliser Alignement utiliser cette classejustify-content-center

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

et en savoir plus sur la 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>
Développer l'extrait

core114
la source
8

Les solutions mentionnées précédemment pour Bootstrap 3.0 ne fonctionnaient pas pour moi sur 3.1.1. La classe a la pagination display:blocket les <li>éléments ont float:left, ces moyens d' emballage simplement le <ul>dans text-centerseul ne fonctionne pas. Je n'ai aucune idée de comment ou quand les choses ont changé entre 3.0 et 3.1.1. Quoi qu'il en soit, j'avais fait l' <ul>usage à la display:inline-blockplace. 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' styleattribut et placez-le dans votre feuille de style à la place:

.pagination {
    display: inline-block;
}

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

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

Vous pouvez ajouter votre Css personnalisé:

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

Je vous remercie

Ferhat KOÇER
la source
7

Ceci, cela a fonctionné pour moi:

Style :

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

.pagination li {
  display: block;
 }

Et lame :

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>
Andrew
la source
En utilisant les paramètres de votre première définition, j'ai créé la classe ci-dessous et l'ai ajoutée au div d'emballage au-dessus de ma pagination a fait l'affaire pour moi. .cs-list-paginator { display: flex; justify-content: center; }
cdsaenz le
4

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

Naty
la source
1

Dans v4.0.0-alpha.6:

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

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>
Eassa Nassar
la source
0

Je n'ai pas réussi à faire fonctionner l'une des solutions proposées avec Bootstrap 4 alpha 6, mais la variation suivante m'a finalement permis d'obtenir 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, marginou de la classe sur la div d'emballage a semblé fonctionner.

Emma Burrows
la source
0

Ce css fonctionne pour moi:

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}
ZekeMidas
la source
-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>
Développer l'extrait

Parth Patel
la source
Pas besoin de classe personnalisée quand il y a des helpers dans bootstrap qui résoudront le problème.
Cam Tullos