Centre un elemento en Bootstrap 4 Navbar

No importa lo que bash, no puedo centrar algo en la barra de navegación de Bootstrap, ¿alguna solución para eso?

He intentado agregar un div, usando margin:0 auto; o margin-right:auto; margin-left:auto; margin-right:auto; margin-left:auto; , se usó la clase de center-block . Nada funciona, ¿por qué es tan difícil lograr algo tan simple que no puedo entender, lo que estoy haciendo mal?

Aquí está el código actual:

 

En Bootstrap 4, hay una nueva utilidad conocida como .mx-auto . Solo necesita especificar el ancho del elemento centrado.

Ref: http://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Diferente de la respuesta de Bass Jobsen, que es un centro relativo de los elementos en ambos extremos, el siguiente ejemplo está centrado absoluto.

Aquí está el HTML:

  

Y CSS:

 .navbar-logo { width: 90px; } 

Actualizado para Bootstrap 4.1+

Bootstrap 4 la barra de navegación ahora usa flexbox para que el Website Name del Website Name se pueda centrar utilizando mx-auto . Los menús laterales izquierdo y derecho no requieren flotadores.

  

Centro de la barra de navegación con demo mx-auto

Si la barra de navegación solo tiene una navbar-nav , entonces navbar-nav justify-content-center también se puede usar para centrar.

EDITAR

En la solución anterior, el Website Name del Website Name está centrado en relación con la navbar-nav izquierda y derecha, navbar-nav lo que si el ancho de estos navbar-nav adyacentes es diferente, el Website Name del Website Name ya no está centrado.

enter image description here

Para resolver esto, se puede usar una de las soluciones de flexbox para el centrado absoluto

Opción 1 – Posición de uso: absoluta;

Dado que está bien utilizar el posicionamiento absoluto en flexbox, una opción es usar esto en el elemento que se centrará.

 .abs-center-x { position: absolute; left: 50%; transform: translateX(-50%); } 

Centro Navbar con posición absoluta Demo

Opción 2: usar nesting de flexbox

Finalmente, otra opción es hacer que el elemento centrado también display:flexbox y center justified. En este caso, cada componente de barra de navegación debe tener flex-grow:1

A partir de Bootstrap 4 Beta, ahora se display:flex la barra de navegación display:flex . Bootstrap 4.1.0 incluye una nueva clase de flex-fill para que cada sección de navegación llene el ancho:

  

Centro Navbar con demostración de anidamiento flexbox

Antes de Bootstrap 4.1.0 puede agregar la clase de relleno flexible de esta manera …

 .flex-fill { flex:1 } 

Demostraciones del centro Bootstrap 4 Navbar

Ver también:
¿Cómo centrar elementos de navegación en Bootstrap?

enter image description here

Prueba esto.

 .nav-tabs > li{ float:none !important; display:inline-block !important; } .nav-tabs { text-align:center !important; } 

Ver: https://stackoverflow.com/a/14146967/1596547 , ahora puede usar:

  

aplique text-xs-center en su contenedor y configure la display: inline-block; para tu lista

Tuve un problema similar; el texto de anclaje en mi barra de navegación Bootstrap4 no estaba centrado. Simplemente se agregó text-center en la clase del ancla.

hacer un nuevo estilo

 .container { position: relative; } .center-nav { position: absolute; left: 0; right: 0; margin: 0 auto; width: auto; max-width: 200px; text-align: center; } .center-nav li{ text-align: center; width:100%; } 

Reemplace el nombre del sitio web UL por debajo

  

Espero que esto ayude..

de los documentos

Navbars puede contener fragmentos de texto con la ayuda de .navbar-text. Esta clase ajusta la alineación vertical y el espaciado horizontal para cadenas de texto.

apliqué la clase .navbar-text a mi elemento

  • , por lo que el resultado es

      

    esto centra los enlaces verticalmente con respecto a mi img navbar-brand