title: Centering links (within li's) in Bootstrap navbar
body: <p>I've implemented the solution <a href="https://stackoverflow.com/questions/10568103/modify-twitter-bootstrap-navbar">here</a> which <em>almost</em> solves my problem, however, I need the <code>&lt;ul class="nav"&gt;</code> to be centered between the entire navbar and not just the elements adjacent to it (<code>&lt;a class="brand"&gt;</code> and <code>&lt;p class="navbar-text pull-right"&gt;</code> in my case).</p>
  
  <p>Important: I <a href="http://twitter.github.io/bootstrap/customize.html" rel="nofollow noreferrer">customized</a> my navbar to be <code>96px</code> instead of the default <code>40px</code>, and I want the <code>&lt;ul class="nav"&gt;</code> to appear centered and "underneath" the other elements as it will have its own background-color etc.</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top center"&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;a class="brand" href="/home"&gt;&lt;img src="http://jayeshcp.files.wordpress.com/2013/03/twitter-bootstrap.jpg" style="width:400px;height:60px;" /&gt;&lt;/a&gt;
              &lt;div class="nav-collapse collapse"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;p class="navbar-text pull-right"&gt;
                      &lt;input class="span2" type="text" placeholder="Email"&gt;
                      &lt;input class="span2" type="password" placeholder="Password"&gt;
                  &lt;/p&gt;
              &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note the extra <code>center</code> class that I added - that is from the solution that I linked to. It looks like this:</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;
  }
  
  .center .dropdown-menu {
      text-align: left;
  }
  </code></pre>
  
  <p>How do I center the <code>ul</code> and give it padding above without breaking everything else in Bootstrap? Would offer more than bounty if there was another currency!</p>
  
  <p><strong>edit:</strong> jsfiddle is <a href="http://jsfiddle.net/ekn_/C7LWm/102/" rel="nofollow noreferrer">here</a> (I pasted the whole minified css file (with the customized navbar height) instead of referencing it, sorry. Underneath it are the other customizations.)</p>