104 votos

El centrado de la paginación en bootstrap

Tengo este código en pgination

<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 está alineada a la izquierda. hay alguna forma de centro de la ul wrt div

he intentado margin: auto auto y margin :0 auto pero no funciona

154voto

Praveen Kumar Puntos 29309

Bootstrap se ha añadido una nueva clase a partir de la 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>

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

Dar de esta manera:

.pagination {text-align: center;}

Funciona porque ul está usando inline-block;

Violín: http://jsfiddle.net/praveenscience/5L8fu/


O si desea utilizar Bootstrap de la clase:

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

Violín: http://jsfiddle.net/praveenscience/5L8fu/1/

86voto

user67457 Puntos 97

Por tanto Bootstrap 3.0 y 2.3.2, al centro de la paginación, la .texto-centro de clase puede ser aplicado a la que contiene div.

Nota: Dónde aplicar el .la paginación de la clase en el marcado ha cambiado entre Bootstrap 2.3.2 y 3.0. Ver más abajo, o leer los archivos de inicio de google docs en la paginación: Bootstrap 3.0, Bootstrap 2.3.2.

Bootstrap 3 Ejemplo

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

8voto

curtisdf Puntos 2167

Las soluciones mencionadas anteriormente para el Bootstrap 3.0 no me funciona en 3.1.1. La paginación de la clase ha display:block, y el <li> elementos float:left, lo que significa simplemente envolviendo <ul> en text-center sola no funciona. No tengo idea de cómo o cuando las cosas cambiaron entre 3.0 y 3.1.1. De todos modos, tenía hacer la <ul> uso 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 un limpiador de instalación, se omite el style de atributo y la puso en su hoja de estilos en su lugar:

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

Y, a continuación, utilizar el marcado previamente sugerido:

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X