paginacion definicion bootstrap attribute html css twitter-bootstrap css3

html - definicion - Centrar la paginación en bootstrap



title html attribute (10)

Tengo este código en la paginación

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

Pero mi ul queda alineado. ¿Hay alguna manera de centrar el ul wrt div ?

Intenté el margin: auto auto y margin :0 auto ellos pero no funcionó.


Bootstrap ha agregado una nueva clase 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 tiene una nueva clase

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

Dale de esta manera:

.pagination {text-align: center;}

Funciona porque ul está usando inline-block;

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

O si desea usar la clase 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/


En v4.0.0-alpha.6:

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


Este css funciona para mí:

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


Esto funciona para mi:

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


Las soluciones mencionadas anteriormente para Bootstrap 3.0 no funcionaron para mí en 3.1.1. La clase de paginación tiene display:block , y los elementos <li> tienen float:left , lo que significa simplemente envolver el <ul> en text-center solo no funciona. No tengo ni idea de cómo ni cuándo las cosas cambiaron entre 3.0 y 3.1.1. De todos modos, hice la display:inline-block <ul> use display:inline-block lugar. Aquí está el código:

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

O para una configuración más limpia, omita el atributo de style y colóquelo en su hoja de estilo:

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

Y luego use el marcado previamente sugerido:

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


No pude conseguir ninguna de las soluciones propuestas para trabajar con Bootstrap 4 alpha 6, pero la siguiente variación finalmente me consiguió una barra de paginación centrada.

Anulación de CSS:

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

HTML:

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

Ninguna otra combinación de display , margin o clase en el div de envoltura parecía funcionar.


Para centrar la paginación en BS4, debe agregar justify-content-center en 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>

Consulte Pagination Bootstrap 4 para obtener más información.


Puede agregar su Css personalizado:

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

Gracias


Tanto para Bootstrap 3.0 como para 2.3.2, para centrar la paginación, la clase .text-center se puede aplicar a la div que contiene.

Nota: Donde aplicar la clase .pagination en el marcado ha cambiado entre Bootstrap 2.3.2 y 3.0. Consulte a continuación o lea los documentos de Bootstrap sobre paginación: Bootstrap 3.0 , Bootstrap 2.3.2 .

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

Bootstrap 2.3.2 Ejemplo

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


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>