Wie Center-Marke/Bild-in Navbar

Ich habe gekämpft, alle morgen mit diesem kleinen Ding.
Ich versuche die Mitte der .navbar-brand werden in der Mitte der gesamten Navigationsleiste mit Bootstrap 3.

Könnte jemand lösen, meine Rätsel?

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>

Vorschau: GTA5CH.AT/twitch

Ich würde gerne das logo in der Mitte/in der Mitte der navbar, wie?

Ich weiß nicht, was erreicht Bootstrap mit jQuery, aber Sie werden immer diese Fehlermeldung in der Konsole: "Bootstrap-JavaScript erfordert jQuery"

InformationsquelleAutor D.M. | 2014-11-20

  1. 5

    Vorausgesetzt, Sie wollen, halten Sie die Menü-Optionen Links ausgerichtet ist, erreichen Sie dies mit dem folgenden:

    .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%);
}

    Fiddle

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

    InformationsquelleAutor Manjunath Siddappa

  3. 0

    Können Sie versuchen folgenden code:

    .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

    Ich fand diese Antwort hilfreich: https://stackoverflow.com/a/17550180/4597784

    Diese Klasse verwenden, anstatt die navbar-brand Klasse, so dass Sie nicht unerwünschte styling:

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

    Und im HTML:

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

    InformationsquelleAutor Rachel S

Schreibe einen Kommentar