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