Centrowanie paginacji w bootstrapie

100

Mam ten kod w paginacji

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

Ale mój uljest wyrównany do lewej. Czy jest jakiś sposób na wyśrodkowanie ulwrt div?

Próbowałem margin: auto autoi margin :0 autooni, ale nie działali.

user192362127
źródło
12
W przypadku Bootstrap 3 musiałbyś owinąć <ul class="pagination">...</ul>wnętrze pliku <div class="text-center"></div>.
krakanie
Bootstrap ma kilka wersji ... Byłoby pomocne, gdybyś mógł wspomnieć, której konkretnej wersji używasz.
Tariqul Islam

Odpowiedzi:

153

Bootstrap dodał nową klasę od 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 ma nową klasę

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

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

Ustąp w ten sposób:

.pagination {text-align: center;}

Działa, ponieważ ulużywainline-block;

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


Lub jeśli chcesz użyć klasy 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>

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

Praveen Kumar Purushothaman
źródło
9
@Praveen .pagination-centered został usunięty w Bootstrap 3, zamiast tego użyj .text-center. Jednak bez mojej opinii przeciwnej: P
Kevin C.
2
Nie wiem, kiedy downvoting drive-by stał się fajny, ale twoja pierwsza odpowiedź mi pasuje, więc miej pozytywną opinię.
David Harbage
5
Bootstrap 4 powinien być<div class='d-flex'><ul class='pagination mx-auto'>...
Lysergia
8
Dodaj <ul class="pagination pagination-lg justify-content-center">...do rozwiązań proszę. getbootstrap.com/docs/4.1/components/pagination/#alignment
Денис
5
Aktualnie akceptowana odpowiedź jest nieprawidłowa. W pewnym momencie było to oczywiście dobre, ale teraz jest złe, przynajmniej w przypadku BS 4.x. Prawidłowa odpowiedź to teraz dodanie justify-content-center do ul: <ul class = "pagination justify-content-center">
FlashJordan
86

Zarówno w przypadku Bootstrap 3.0, jak i 2.3.2, aby wyśrodkować paginację, klasę .text-center można zastosować do zawierającego div .

Uwaga: Miejsce zastosowania klasy .pagination w znaczniku zmieniło się między Bootstrap 2.3.2 a 3.0. Zobacz poniżej lub przeczytaj dokumentację Bootstrap dotyczącą stronicowania: Bootstrap 3.0 , Bootstrap 2.3.2 .

Przykład 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/

Przykład 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
źródło
4
również Bootstrap powinien to udokumentować.
ryenus
47

Aby dośrodkowane paginacji w BS4, należy dodać justify-content-centerw 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">

Aby uzyskać więcej informacji, zobacz Pagination Bootstrap 4 .

NoobTW
źródło
2
powinno być odpowiedzią
nam vo
19

Używając laravel z bootstrap 4, rozwiązanie, które zadziałało:

            <div class="d-flex">
                <div class="mx-auto">
                    {{$products->links("pagination::bootstrap-4")}}
                </div>
            </div>
manelseo
źródło
używając Symfony i bootstrap4, działa też! dzięki !
Roubi
12

rozwiązanie dla Bootstrap 4

Możesz tego użyć Wyrównanie użyj tej klasyjustify-content-center

Zmień wyrównanie komponentów stronicowania za pomocą narzędzi Flexbox .

i dowiedz się więcej o paginacji

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

core114
źródło
8

Wspomniane wcześniej rozwiązania dla Bootstrap 3.0 nie działały u mnie w wersji 3.1.1. Klasa ma paginacji display:block, a <li>elementy mają float:left, co oznacza, owijając jedynie <ul>w text-centerspokoju nie działa. Nie mam pojęcia, jak i kiedy coś się zmieniło między 3.0 a 3.1.1. W każdym razie zamiast tego <ul>skorzystałem display:inline-block. Oto kod:

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

Lub, aby uzyskać bardziej przejrzystą konfigurację, pomiń styleatrybut i umieść go w swoim arkuszu stylów:

.pagination {
    display: inline-block;
}

Następnie użyj sugerowanych wcześniej znaczników:

<div class="text-center">
    <ul class="pagination">
        <li><a href="...">...</a></li>
    </ul>
</div>
curtisdf
źródło
7

Możesz dodać swój niestandardowy CSS:

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

Dziękuję Ci

Ferhat KOÇER
źródło
7

To zadziałało dla mnie:

Styl :

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

.pagination li {
  display: block;
 }

I ostrze :

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>
Andrzej
źródło
Korzystając z ustawień Twojej pierwszej definicji, utworzyłem poniższą klasę i dodałem ją do zawijającego elementu div powyżej mojej paginacji. .cs-list-paginator { display: flex; justify-content: center; }
cdsaenz
4

Mi to pasuje:

<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
źródło
1

W wersji 4.0.0-alpha.6:

<div class="text-center text-sm-right">
    <ul class="pagination d-inline-flex">...</ul>
</div>
Cam Tullos
źródło
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
źródło
0

Nie mogłem uzyskać żadnego z proponowanych rozwiązań do pracy z Bootstrap 4 alfa 6, ale następująca odmiana w końcu dała mi wyśrodkowany pasek paginacji.

Zastąpienie CSS:

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

HTML:

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

Żadna inna kombinacja display, marginlub klasy na div owijania wydawało się do pracy.

Emma Burrows
źródło
0

Ten CSS działa dla mnie:

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}
ZekeMidas
źródło
-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>

Parth Patel
źródło
Nie ma potrzeby tworzenia niestandardowych klas, gdy w bootstrapie są pomocnicy, którzy rozwiążą problem.
Cam Tullos