No dejes de compartir nuestro espacio y códigos en tus redes, necesitamos de tu ayuda para ampliar nuestra comunidad.
Solución:
Actualizado para Bootstrap 4.1+
Bootstrap 4, la barra de navegación ahora usa flexbox, por lo que Website Name se puede centrar usando mx-auto. Los menús del lado izquierdo y derecho no requieren flotantes.
Centro de barra de navegación con mx-auto Manifestación
Si la barra de navegación solo tiene una navbar-nav, luego justify-content-center también se puede utilizar para centrar.
EDITAR
En la solución anterior, el Website Name esta centrado relativo a la izquierda y a la derecha navbar-nav así que si el ancho de estos navs adyacentes es diferente el Website Name ya no está centrado.
Para resolver esto, una de las soluciones de Flexbox para centrado absoluto puede ser usado…
Opción 1 – Posición de uso: absoluta;
Dado que está bien usar el posicionamiento absoluto en flexbox, una opción es usar esto en el elemento que se va a centrar.
.abs-center-x
position: absolute;
left: 50%;
transform: translateX(-50%);
Centro de barra de navegación con posición absoluta Manifestación
Opción 2: usar el anidamiento de flexbox
Finalmente, otra opción es hacer que el elemento centrado también display:flexbox (utilizando d-flex) y justificado al centro. En este caso, cada componente de la barra de navegación debe tener flex-grow:1
A partir de Bootstrap 4 Beta, Navbar es ahora display:flex. Bootstrap 4.1.0 incluye un nuevo flex-fill class para hacer que cada sección de navegación llene el ancho:
Centro de barra de navegación con anidamiento de flexbox Manifestación
Antes de Bootstrap 4.1.0, puede agregar la clase de relleno flexible como esta …
.flex-fill
flex:1
A partir de 4.1 flex-fill está incluido en Bootstrap.
Demostraciones de Bootstrap 4 Navbar Center
Más demostraciones centradas
Vínculos centrales en el escritorio, alineación a la izquierda en el móvil
Relacionado:
¿Cómo centrar los elementos de navegación en Bootstrap?
Bootstrap NavBar con elementos alineados a la izquierda, al centro o a la derecha
Cómo mover el elemento ‘nav’ debajo de ‘navbar-brand’ en mi Navbar
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
A diferencia de la respuesta de Bass Jobsen, que es un centro relativo a los elementos en ambos extremos, el siguiente ejemplo tiene un centro absoluto.
Aquí está el HTML:
Y CSS:
.navbar-logo
width: 90px;
Eres capaz de auxiliar nuestra tarea fijando un comentario y valorándolo te lo agradecemos.