title: Centering brand logo in Bootstrap Navbar
body: <p>I am trying to implement a Bootstrap 3 navbar so that the brand logo to always remain in the middle. This is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navbar navbar-fixed-top navbar-default"&gt;
    &lt;div class="navbar-inner"&gt;
      &lt;div class="container"&gt;
        &lt;button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="brand" style="margin: 0; float: none;" href="#"&gt;
        &lt;img src="/Content/themes/next/images/logo.png" /&gt;&lt;/a&gt;
        &lt;div class="nav-collapse"&gt;
          &lt;ul class="nav"&gt;
            &lt;li&gt; &lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt; &lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;ul class="nav pull-right"&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;
              &lt;div class="nextCog"&gt;&lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;span class="navbar-text pull-right"&gt;superpup1 &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It makes a nice looking navbar:
  <img src="https://i.stack.imgur.com/jfuSa.png" alt="enter image description here"></p>
  
  <p>However, I would like the logo (green) remain in the middle persistently. I am adding this style to the  tag with "brand" class:</p>
  
  <pre><code>&lt;a class="brand" style="margin: 0; float: none; text-align:center" href="#"&gt;
    &lt;img src="/Content/themes/next/images/logo.png" /&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>It partially solves the problem: the logo is in the middle but it pushes the rest of the navbar elements down:</p>
  
  <p><img src="https://i.stack.imgur.com/Ah44d.png" alt="enter image description here"></p>
  
  <p>This is an undesirable effect that I would like to eliminate. Could you suggest a solution? Maybe it's a wrong approach to centering a logo from the start ?</p>