Twitter Bootstrap: Center Pills

Mi pregunta es ¿cómo puedes centrar las píldoras?

Intenté agregar el bloque central y también cambiar el float:left float:center pero nada ayuda.

¡Esto se ha vuelto mucho más simple! Solo necesita usar la clase text-center en el contenedor, y aplicar display:inline-block al ul . Solo asegúrese de tener un salto de línea o una etiqueta de párrafo que separe el navegador de cualquier otro elemento dentro del contenedor.

¡Hecho! 2 adiciones de clase, 1 línea de CSS (¡no modifique el archivo bootstrap css!).

HTML:

  

CSS:

 .center-pills { display: inline-block; } 

Edición de 2015 : como Artur Beljajev ha mencionado, el soporte de Flexbox ahora es lo suficientemente común como para usarlo:

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

Si quieres pastillas de ancho variable en un contenedor de ancho variable, te sugiero usar el tipo de visualización de inline-block y agregar una clase al contenedor de pastillas.

Aquí es cómo extendí el bootstrap para centrar píldoras.

CSS:

 .centered-pills { text-align:center; } .centered-pills ul.nav-pills { display:inline-block; } .centered-pills li { display:inline; } .centered-pills a { float:left; } * html .centered-pills ul.nav-pills { display:inline; } /* IE6 */ *+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */ 

HTML:

  

O enfoque de flexbox:

 .nav-pills { display: flex; justify-content: center; } 

Si desea que las píldoras estén centradas en lugar de alineadas a la izquierda, tendrá que cambiar la CSS. Deberá especificar un ancho y cambiar el margen para que sea automático.

Por ejemplo:

 .tabs, .pills { margin: 0 auto; padding: 0; width: 400px; } 

Si bien la respuesta de @minaz funciona para una lista con un ancho conocido, propondría una solución diferente que funcione incluso si cambia el contenido de la lista:

 .tabs, .pills { text-align: center; } .tabs li, .pills li { float: none; } 

O en SCSS:

 .tabs, .pills { text-align: center; li { float: none; } } 

Esto centrará el texto dentro de la lista y restablecerá la propiedad float de los elementos de la lista para que se vean afectados por la propiedad text-align .

Una solución simple con Bootstrap 4 Utilice justify-content-center en

    nav

    Ejemplo:

     @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css') 
       

    Hi

    Hi

    Ni Hao