Centrage de la pagination dans 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 mon ul
est aligné à gauche. Y a-t-il un moyen de centrer le ul
wrt div
?
j'ai essayé margin: auto auto
et margin :0 auto
mais ils n'ont pas de travail.
13 réponses
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 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 cette voie:
.pagination {text-align: center;}
cela fonctionne parce que ul
utilise inline-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/
pour Bootstrap 3.0 et 2.3.2, pour centrer la pagination, le .la classe peut être appliquée à la classe contenant div .
Note: où appliquer le .la classe de pagination dans le markup a changé entre Bootstrap 2.3.2 et 3.0. Voir ci-dessous, ou lire le Bootstrap docs sur la pagination: Bootstrap 3.0 , Bootstrap 2.3.2 .
Bootstrap 3 Exemple
<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 Exemple
<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>
pour centrer la pagination dans BS4, devrait ajouter 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 de plus amples informations.
les solutions mentionnées précédemment pour Bootstrap 3.0 n'ont pas fonctionné pour moi sur 3.1.1. La classe de pagination a display:block
, et les éléments <li>
ont float:left
, ce qui signifie simplement envelopper le <ul>
dans text-center
ne fonctionne pas seul. Je ne sais pas comment ni quand les choses ont changé entre 3.0 et 3.1.1. Quoi qu'il en soit, j'ai fait le <ul>
utiliser display:inline-block
à la place. Voici le code:
<div class="text-center">
<ul class="pagination" style="display:inline-block">
<li><a href="...">...</a></li>
</ul>
</div>
ou pour une installation plus propre, omettre le style
attribut et mettez - le dans votre feuille de style à la place:
<style>
.pagination {
display: inline-block;
}
</style>
et ensuite utiliser le markup précédemment suggéré:
<div class="text-center">
<ul class="pagination">
<li><a href="...">...</a></li>
</ul>
</div>
Ça marche pour moi:
<div class="text-center">
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</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">»</span>
</a>
</li>
</ul>
vous pouvez ajouter votre CSS personnalisé:
.pagination{
display:table;
margin:0 auto;
}
Merci
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>
en v4.0.0-alpha.6:
<div class="text-center text-sm-right">
<ul class="pagination d-inline-flex">...</ul>
</div>
Ceci cela, il a travaillé pour moi:
Style :
.pagination {
display: flex;
justify-content: center;
}
.pagination li {
display: block;
}
et lame :
<div class="pagination">
{{ $myCollection->render() }}
</div>
aucune des solutions proposées ne fonctionnait avec Bootstrap 4 alpha 6, mais la variation suivante m'a finalement permis d'obtenir une barre de pagination centrée.
CSS override:
.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 de classe sur le div d'emballage ne semblait fonctionner.
Cette css fonctionne pour moi:
.dataTables_paginate {
float: none !important;
text-align: center !important;
}
solution pour Bootstrap 4
Vous pouvez l'utiliser
alignement
utilisez cette classe justify-content-center
modifier l'alignement des composants de pagination avec Flexbox utilities .
et en savoir plus sur elle 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>
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>