Comment faire pour centrer Marque/Image dans la barre de navigation

J'ai été mal toute la matinée avec cette petite chose.
J'essaie de centre de la .navbar-brand pour être dans le milieu de l'ensemble de la barre de navigation avec Bootstrap 3.

Quelqu'un pourrait-il résoudre mon énigme?

CODE:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="img/logo.png" alt=" "/></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="add/">Add your Channel</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
</nav>

Un aperçu: GTA5CH.AT/twitch

J'aimerais que le logo dans le milieu/centre de la barre de navigation, comment?

  • Je ne sais pas ce que réalise Bootstrap avec jQuery, mais vous obtenez ce message d'erreur dans la console: "de Bootstrap, JavaScript nécessite jQuery"
InformationsquelleAutor D.M. | 2014-11-20
  1. 5

    En supposant que vous souhaitez conserver les options de menu à gauche, vous pouvez accomplir cela en utilisant les suivantes:

    .navbar-header{
   left: 50%;
   position: relative;
   transform: translateX(-50%);
}
    InformationsquelleAutor SW4
  2. 1
    .navbar-brand{
margin:0 auto;
 left: 50%;
 position: relative;
transform: translateX(-50%);
}

    Violon

    http://jsfiddle.net/DTcHh/2027/

    InformationsquelleAutor Manjunath Siddappa
  3. 0

    Vous pouvez essayer de code ci-dessous:

    .container-fluid
 {
   text-align: center;
   display: block;
 }
#navbar, .navbar-header{
  display: inline-block !important;
  float: none;
  margin-right:0 !important;
}
    InformationsquelleAutor Pradeep Pansari
  4. 0

    J'ai trouvé cette réponse utile: https://stackoverflow.com/a/17550180/4597784

    L'utilisation de cette classe à la place de la navbar-brand classe afin de ne pas obtenir indésirables style:

    .centered-navbar {position:absolute; left:25%; width:50%; text-align:center;}

    Et dans le code HTML:

    <div class="centered-navbar"><a href="#"><img src="img/logo.gif" style="height:46px; width:196px;"></a></div>
    InformationsquelleAutor Rachel S