Centrado del logotipo de la marca en Bootstrap Navbar

Solución:

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 acercar y alejar.

Ver violín

La forma más sencilla es transformación CSS:

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

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

---

De esta manera también funciona con tamaños dinámicos imagenes de fondo para el logo 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:

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
        </a>

---

Sin embargo, también podemos usar flexbox. Sin embargo, usando este método tendríamos que movernos navbar-brand fuera de navbar-header. Sin embargo, de esta manera es genial porque ahora podemos tener una imagen y un texto uno al lado del otro:

.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 envuelva 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 en ..

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

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

EDITAR: otro enfoque está utilizando 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 puede utilizar para centrar la marca y otros elementos. Consulte Cómo colocar el contenido 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, al centro o a la derecha

---

---

Utiliza Nuestro Buscador