Contenido del centro en la barra de navegación del bootstrap receptivo

Tengo problemas para centrar mi contenido en la barra de navegación del bootstrap. Estoy usando bootstrap 3. He leído muchas publicaciones, pero el CSS o los métodos utilizados no funcionarán con mi código. Estoy realmente frustrado, así que esta es mi última opción. ¡Cualquier ayuda sería apreciada!

   Navigation             

https://jsfiddle.net/amk07fb3/

Creo que esto es lo que estás buscando. Debe quitar el float: left del navegador interno para centrarlo y convertirlo en un bloque en línea.

 .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } 

http://jsfiddle.net/bdd9U/2/

Editar: si solo desea que ocurra este efecto cuando el navegador no está colapsado, colóquelo en la consulta de medios apropiada.

 @media (min-width: 768px) { .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } } 

http://jsfiddle.net/bdd9U/3/

La publicación original preguntaba cómo centrar la barra de navegación contraída. Para centrar los elementos en la barra de navegación normal, intente esto:

 .navbar-nav { float:none; margin:0 auto; display: block; text-align: center; } .navbar-nav > li { display: inline-block; float:none; } 

Hay otra forma de hacer esto para los diseños que no tienen que colocar la barra de navegación dentro del contenedor y que no requiere ningún reemplazo de CSS o Bootstrap.

Simplemente coloque un div con la clase de container Bootstrap alrededor de la barra de navegación. Esto centrará los enlaces dentro de la barra de navegación:

   

Si desea alinear luego el contenido del cuerpo con la barra de navegación central, también coloca el contenido de ese cuerpo en la etiqueta del container Bootstrap.

 

No todos pueden usar este tipo de diseño (algunas personas necesitan anidar la barra de navegación dentro del container ). Sin embargo, si puede hacerlo, es una forma fácil de obtener enlaces de su barra de navegación y cuerpo centrado.

Puede ver los resultados en esta página completa JSFiddle: http://jsfiddle.net/bdd9U/231/embedded/result/

Fuente: http://jsfiddle.net/bdd9U/229/

Este código funcionó para mí

 .navbar .navbar-nav { display: inline-block; float: none; } .navbar .navbar-collapse { text-align: center; } 

del sitio oficial de bootstrap (y, casi, como dijo Eric S. Bullington).

https://getbootstrap.com/components/#navbar-default

la barra de navegación de ejemplo se ve así:

  

centrar el navegador, eso que hice:

  

css:

 @media (min-width:768px) { /* don't break navbar on small screen */ #nav_center { width: 700px /* need to found your width according to your entry*/ } } 

trabaje con class = “container” y navbar-right or left, y por supuesto puede reemplazar id por clase. :RE

Actualización 2018

Bootstrap 4

Centrar el contenido de Navbar es más fácil Bootstrap 4 y puede ver muchos escenarios de centrado explicados aquí: https://stackoverflow.com/a/20362024/171456

Bootstrap 3

Otro escenario que parece no haber sido respondido todavía es centrar los enlaces de la marca y de la barra de navegación . Aquí hay una solución …

 .navbar .navbar-header, .navbar-collapse { float:none; display:inline-block; vertical-align: top; } @media (max-width: 768px) { .navbar-collapse { display: block; } } 

http://www.codeply.com/go/1lrdvNH9GI

Ver también: NavBar Bootstrap con elementos alineados a la izquierda, centro o derecha

Parece que todas estas respuestas implican un CSS personalizado en la parte superior del bootstrap. La respuesta que brindo solo utiliza el arranque, por lo que espero que llegue a utilizarse para aquellos que desean limitar las personalizaciones.

Esto fue probado con Bootstrap V3.3.7

 

I am centered text

V4 de BootStrap agrega Center (justify-content-center) y Right Alignment (justify-content-end) según https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment

  

Use el siguiente html

   

Y css

 .navbar-nav { width: 100%; text-align: center; } .navbar-nav > li { float: none; display: inline-block; } .navbar-default { background-color: white; border-color: white; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{ background-color:white; } 

Modificar de acuerdo a tus necesidades

Esto debería funcionar

  .navbar-nav { position: absolute; left: 50%; transform: translatex(-50%); }