Centrando a paginação no bootstrap

100

Eu tenho esse código na paginação

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

Mas o meu ulestá alinhado à esquerda. Existe alguma maneira de centralizar o ulwrt div?

Eu tentei margin: auto autoe margin :0 autoeles mas não funcionaram.

user192362127
fonte
12
Com o Bootstrap 3, você teria que envolver o <ul class="pagination">...</ul>interior a <div class="text-center"></div>.
caw
O Bootstrap tem várias versões ... Seria útil se você pudesse mencionar a versão específica que está usando.
Tariqul Islam

Respostas:

153

O Bootstrap adicionou uma nova classe 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 tem nova 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>

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

Dê desta forma:

.pagination {text-align: center;}

Funciona porque ulestá usandoinline-block;

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


Ou se você gostaria de usar a classe 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/

Praveen Kumar Purushothaman
fonte
9
@Praveen .pagination-centered foi removido no Bootstrap 3, use .text-center em seu lugar. No entanto, nenhum voto negativo de mim: P
Kevin C.
2
Não sei quando o downvote drive-by se tornou legal, mas sua primeira resposta funciona para mim, então dê um upvote.
David Harbage
5
Bootstrap 4 deve ser<div class='d-flex'><ul class='pagination mx-auto'>...
Lysergia
8
Adicione <ul class="pagination pagination-lg justify-content-center">...às soluções, por favor. getbootstrap.com/docs/4.1/components/pagination/#alignment
Денис
5
A resposta aceita atualmente está errada. Obviamente estava certo em algum ponto, mas está errado agora, pelo menos para o BS 4.x. A resposta correta agora é adicionar justify-content-center ao ul: <ul class = "pagination justify-content-center">
FlashJordan
86

Para Bootstrap 3.0 e 2.3.2, para centralizar a paginação, a classe .text-center pode ser aplicada ao div que o contém .

Nota: Onde aplicar a classe .pagination na marcação mudou entre Bootstrap 2.3.2 e 3.0. Veja abaixo ou leia a documentação do Bootstrap sobre paginação: Bootstrap 3.0 , Bootstrap 2.3.2 .

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

Exemplo 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
fonte
4
também o Bootstrap deve documentar isso.
Ryenus
47

Para centrado a paginação em BS4, deve adicionar justify-content-centerem 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">

Consulte Pagination Bootstrap 4 para obter mais informações.

NoobTW
fonte
2
deve ser a resposta
nam vo
18

Usando laravel com bootstrap 4, a solução que funcionou:

            <div class="d-flex">
                <div class="mx-auto">
                    {{$products->links("pagination::bootstrap-4")}}
                </div>
            </div>
Manelseo
fonte
usando Symfony e bootstrap4, funcionando também! obrigado !
Roubi
12

solução para Bootstrap 4

Você pode usá-lo Alinhamento use esta classejustify-content-center

Altere o alinhamento dos componentes de paginação com os utilitários do flexbox .

e saiba mais sobre paginação

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

As soluções mencionadas anteriormente para Bootstrap 3.0 não funcionaram para mim no 3.1.1. A classe de paginação tem display:block, e os <li>elementos têm float:left, o que significa que simplesmente envolver o <ul>in text-centersozinho não funciona. Não tenho ideia de como ou quando as coisas mudaram entre 3.0 e 3.1.1. De qualquer forma, eu tinha feito o <ul>uso display:inline-block. Aqui está o código:

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

Ou, para uma configuração mais limpa, omita o styleatributo e coloque-o na sua folha de estilo:

.pagination {
    display: inline-block;
}

Em seguida, use a marcação sugerida anteriormente:

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

Você pode adicionar seu Css personalizado:

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

Obrigado

Ferhat KOÇER
fonte
7

Isso funcionou para mim:

Estilo :

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

.pagination li {
  display: block;
 }

E lâmina :

<div class="pagination">                                              
  {{ $myCollection->render() }}
</div>
Andrew
fonte
Usando as configurações de sua primeira definição, criei a classe abaixo e adicionei-a ao div de envolvimento acima da minha paginação. .cs-list-paginator { display: flex; justify-content: center; }
cdsaenz
4

Funciona para mim:

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

Na v4.0.0-alpha.6:

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

Não consegui fazer nenhuma das soluções propostas funcionar com o Bootstrap 4 alpha 6, mas a variação a seguir finalmente me deu uma barra de paginação centralizada.

Substituição de CSS:

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

HTML:

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

Nenhuma outra combinação de display, marginou classe no div de embrulho parecia funcionar.

Emma Burrows
fonte
0

Este css funciona para mim:

.dataTables_paginate {
   float: none !important;
   text-align: center !important;
}
ZekeMidas
fonte
-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
fonte
Não há necessidade de uma classe personalizada quando há ajudantes no bootstrap que resolverão o problema.
Cam Tullos