title: Centering an Image in a twitter bootstrap navbar
body: <p>Here is my live site: <a href="http://ancient-badlands-4040.herokuapp.com/" rel="nofollow noreferrer">http://ancient-badlands-4040.herokuapp.com/</a></p>
  
  <p>I am trying to center my image and also have the links align vertically with the image.</p>
  
  <p>I got a lot of help with this so far after reading this post <a href="https://stackoverflow.com/questions/14486261/twitter-bootstrap-centering-brand-logo-in-navbar">Twitter Bootstrap - centering brand logo in navbar</a></p>
  
  <p>I was successful earlier centering my image by adjusting my "brand" class (I set the width to 28%).  Unfortunately, I had to adjust the "navbar" class's width as well, after adjusting the width it changed the position of my logo.</p>
  
  <p>I changed my code to the following below, I am trying to center my image and have the links line up evenly with my center image.</p>
  
  <p>Any help would be appreciated, thanks! :)</p>
  
  <p>HTML: **Updated divs and ul classes</p>
  
  <pre><code>    &lt;div class="navbar navbar-fixed-top"&gt;
    &lt;div class="navbar-inner "&gt;
      &lt;div class="container-fluid"&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;div class="nav-collapse collapse"&gt;
          &lt;ul class="nav pull-right"&gt;
            &lt;li&gt;&lt;a&gt;CODEY&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt; &lt;a&gt;CODEY&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;ul class="nav pull-left"&gt;
            &lt;li&gt;&lt;a&gt;CODEY&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;CODEY&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;CODEY&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;a class="brand"&gt;&lt;/a&gt;
            &lt;%= image_tag 'ctclogonewnobg.png', alt: 'logo' %&gt;
  
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>$navbarLinkColor: #90fce8;
  $navbarBackground: #ff3600;
  $navbarBackgroundHighlight: #ff3600;
  $navbarText: Archivo Black, sans-serif;
  @import url(http://fonts.googleapis.com/css?family=Archivo+Black);
  
  
  @import 'bootstrap';
  
  body {
  
      background: url('escheresque_@2X.png');
  }
  
  
  @import 'bootstrap-responsive';
  
  .navbar-inner {
      @include box-shadow(none !important);
      border: 0;
      width: 100%%;
      margin: auto;
  }
  
  
  
  .navbar .brand {
      margin-left: auto;
      margin-right: auto;
      width: 20px;
      float: none;
  
  }
  </code></pre>