title: Bootstrap: center li items in navbar
body: <p>I'm trying to get link1, link2 centered horizontally and vertically. I got the horizontal part working, but no matter what I've tried for vertical nothing changes.</p>
  
  <p>Html code:</p>
  
  <p>
        </p>
  
  <pre><code>      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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;!-- &lt;%= link_to 'Home', root_path %&gt; --&gt;
        &lt;/div&gt;
  
        &lt;div class="navbar-collapse collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;!-- &lt;li&gt;&lt;%= link_to 'Home', root_path %&gt;&lt;/li&gt; --&gt;
            &lt;li&gt;Link 1&lt;/li&gt;
            &lt;li&gt;Link 2&lt;/li&gt;
          &lt;/ul&gt;
       &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Css code: </p>
  
  <pre><code>.navbar .navbar-nav
    display: inline-block
    float: none
    vertical-align: middle
  
  .navbar .navbar-collapse
    text-align: center
  
  /* link */
  .navbar-nav &gt; li
    margin: 3px
    text-transform: uppercase
    font-weight: bold
    color: white
  </code></pre>
  
  <p>How do I get this to work? And do you think that I should be using bootstrap or develop everything with css? </p>