title: Center bootstrap's brand and list items
body: <p>There are several questions about centering Twitter bootstrap's brand or centering the list items in the navigation bar, but I haven't figured out, how to center both.</p>
  
  <p>Here is an example, used in <a href="https://stackoverflow.com/questions/10568103/modify-twitter-bootstrap-navbar">Modify twitter bootstrap navbar</a>, but it only centers the list items, not the brand.
  Here is the structure of the HTML:</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top center"&gt;
       &lt;div class="navbar-inner"&gt;
          ....
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.center.navbar .nav,
  .center.navbar .nav &gt; li {
      float:none;
      display:inline-block;
      *display:inline; /* ie7 fix */
      *zoom:1; /* hasLayout ie7 trigger */
      vertical-align: top;
  }
  
  .center .navbar-inner {
      text-align:center;
  }
  </code></pre>
  
  <p>Here a live demo: <a href="http://jsfiddle.net/C7LWm/" rel="nofollow noreferrer">http://jsfiddle.net/C7LWm/</a></p>
  
  <p>How would I center both the brand and the list items, so that both are centered on one line?</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>I just noticed that if you have a dropdown in the nav bar (like in your updated answer), the dropdown is really messed up (dropdown not showing up at all, if it shows up, the form background disappears).
  A better way would probably be, if all the items are not centered and have a line by its one, instead they should all be on one line and then be centered, similiar to the non-responsive view, except now, there is a second line.
  Is that possible?</p>