Logotipo de la marca de centrado en Bootstrap 3 Navbar

Estoy tratando de implementar una barra de navegación Bootstrap 3 para que el logo de la marca siempre permanezca en el medio. Este es el código:

Hace una bonita barra de navegación: enter image description here

Sin embargo, me gustaría que el logotipo (verde) permanezca en el medio persistentemente. Estoy agregando este estilo a la etiqueta con la clase “marca”:

   

Resuelve parcialmente el problema: el logotipo está en el medio, pero empuja hacia abajo el rest de los elementos de la barra de navegación:

enter image description here

Este es un efecto indeseable que me gustaría eliminar. ¿Podría sugerir una solución? ¿Tal vez es un enfoque equivocado centrar un logo desde el principio?

Prueba esto:

 .navbar { position: relative; } .brand { position: absolute; left: 50%; margin-left: -50px !important; /* 50% of your logo width */ display: block; } 

Centrar su logotipo en un 50% y menos la mitad del ancho de su logotipo para que no tenga problemas al acercarse y alejarse.

Ver violín

La forma más simple es la transformación css :

 .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } 

DEMO: http://codepen.io/candid/pen/dGPZvR

fondo centrado logo bootstrap 3


De esta manera también funciona con imágenes de fondo de tamaño dynamic para el logotipo y nos permite utilizar la clase text-hide:

CSS:

 .navbar-brand { background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat; transform: translateX(-50%); left: 50%; position: absolute; width: 200px; /* no height needed ... image will resize automagically */ } 

HTML:

 Brand Text  

También podemos usar flexbox. Sin embargo, con este método, tendríamos que mover navbar-brand navbar-header fuera de navbar-header . De todos modos, esta manera es genial porque ahora podemos tener imágenes y textos uno al lado del otro:

bootstrap 3 logo centrado

 .brand-centered { display: flex; justify-content: center; position: absolute; width: 100%; left: 0; top: 0; } .navbar-brand { display: flex; align-items: center; } 

Demostración: http://codepen.io/candid/pen/yeLZax

Para lograr estos resultados solo en dispositivos móviles, simplemente ajuste el css anterior dentro de una consulta de medios:

 @media (max-width: 768px) { } 

Actualizado 2018

Bootstrap 3

Vea si este ejemplo ayuda: http://bootply.com/mQh8DyRfWY

La marca se centra utilizando ..

 .navbar-brand { position: absolute; width: 100%; left: 0; top: 0; text-align: center; margin: auto; } 

Su marcado es para Bootstrap 2, no 3. Ya no hay una navbar-inner .

EDITAR – Otro enfoque es usar transform: translateX(-50%);

 .navbar-brand { transform: translateX(-50%); left: 50%; position: absolute; } 

http://www.bootply.com/V7vKDfk46G

Bootstrap 4

En Bootstrap 4, mx-auto o flexbox se pueden usar para centrar la marca y otros elementos. Consulte Cómo colocar los contenidos de la barra de navegación en Bootstrap 4 para obtener una explicación.

Ver también:

Bootstrap NavBar con elementos alineados a la izquierda, centro o derecha

Una vieja pregunta, pero solo para la posteridad.

He encontrado que la manera más fácil de hacerlo es tener la imagen como imagen de fondo de la marca de la barra de navegación. Solo se asegura de poner un ancho personalizado.

 .navbar-brand { margin-left: auto; margin-right: auto; width: 150px; background-image: url('logo.png'); } 

Una solución donde el logotipo está verdaderamente centrado y los enlaces están justificados.

El número máximo recomendado de enlaces para la navegación es 6, dependiendo de la longitud de las palabras en el enlace eache.

Si tiene 5 enlaces, inserte un enlace vacío y ejecútelo con:

 class="hidden-xs" style="visibility: hidden;" 

de esta forma, la cantidad de enlaces siempre es pareja.