bootstrap 3: ¿cómo coloco la marca en el centro de la barra de navegación?

Estoy usando Bootstrap 3. Me gustaría una barra de navegación con solo la marca en ella. No hay otros enlaces ni nada más. Y quiero que la marca esté en el centro. ¿Cómo puedo lograr esto? El siguiente CSS no funciona:

.navbar-brand { text-align: center; } 

css :

 .navbar-header { float: left; padding: 15px; text-align: center; width: 100%; } .navbar-brand {float:none;} 

html :

  

Otra opción es usar nav-justified ..

  

CSS

 .navbar-brand { float:none; } 

Bootply

Ejemplo alternativo

Si no tiene otros enlaces, entonces no hay uso para navbar-header ….

HTML:

  

CSS:

 .navbar-brand { float: none; } 

Sin embargo, si desea otros enlaces, este es un enfoque muy efectivo que permite que: https://stackoverflow.com/a/34149840/3123861

Para arreglar la superposición, solo necesitas modificar .navbar-toggle en tus propios estilos CSS

algo como esto, funciona para mí:

 .navbar-toggle{ z-index: 10; } 

navbar-brand-left dos clases para lograr esto y mantener la capacidad de respuesta navbar-brand-left y navbar-brand-center . Tenga en cuenta que utiliza Sass / Less Bootstrap para la altura de la línea, de lo contrario especifique una altura de px / rem de hardcode.

HTML

  

CSS

 .navbar-brand-left { display: inline-block; margin: 0; padding: 0; line-height: @navbar-height; } .navbar-brand-center { display: inline-block; margin: 0 auto; padding: 0; line-height: @navbar-height; }