Bootstrap: center li items in navbar
<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>