title: Image on bootstrap navbar to stick out above and below menu bar
body: <p>How can I make a bootstrap navbar like that: <a href="https://i.stack.imgur.com/oOJi2.png" rel="nofollow noreferrer">Navbar</a></p>
  
  <p>The image should be centered on the navbar.</p>
  
  <p>Here is what I have currently:</p>
  
  <pre><code>&lt;div class="navbar navbar-static-top"&gt;
      &lt;div class="navbar-inner"&gt; 
          &lt;a class="btn btn-navbar" 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;/a&gt;
          &lt;a class="brand" href="index.html"&gt;
              &lt;img style="height:50px;" src="http://kpv.s3.amazonaws.com/static/img/logo.jpg"&gt;
          &lt;/a&gt;
          &lt;div class="nav-collapse collapse"&gt;
              &lt;ul class="nav pull-left"&gt;
                  &lt;li class="active"&gt;
                      &lt;a href="index.html" class="scroller"&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="pricing.html" class="scroller"&gt;Pricing&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="knowledge.html" class="scroller"&gt;FAQ&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS that accompanies the above code:</p>
  
  <pre><code>.navbar-inner{
      position:relative;
      padding-left:70px;
  }
  
  .navbar .brand {
      margin-left: 0px;
      font-size: 20px;
      font-weight: 200;
      color: #777777;
      text-shadow: 0 1px 0 #ffffff;
      position: absolute;
      width: 50px;
      background: #f00;
      left: 0px;
      top: 0px;
      padding: 10px;
  }
  </code></pre>
  
  <p>That's my new code: <a href="http://www.bootply.com/gEoN0zJ3e8" rel="nofollow noreferrer">http://www.bootply.com/gEoN0zJ3e8</a></p>
  
  <p>How can I make the image centered?</p>