title: Vertical align navigation link text
body: <p>My aim is to have the text links to be central inline with the search text, however i want the border around each of the links to stay how they are. basically how to i centre the text without moving the border. </p>
  
  <p>I have tried adding this to the links .home .reviews .store .contact, however this just moves the border. 
      padding-top:20px;
      margin-top:20px;</p>
  
  <p>Here is my HTML: </p>
  
  <pre><code>&lt;div id="navigation"&gt;
  
  &lt;nav class="navbar"&gt;
                  &lt;div class="navbarcontainer"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="home"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="reviews"&gt;&lt;a href="#"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="store"&gt;&lt;a href="#"&gt;Store&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="contact"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>Here is my CSS: </p>
  
  <pre><code>/* NAVIGATION */
  
  
  li {
      display:inline-block;
      float:left; 
      border:1px black solid;
      padding-left:12px;
      padding-right:12px;
      height:60px;
  }
  
  a:link, a:visited {
      text-decoration: none;
      color:#fff;
      font-family: 'Open Sans', sans-serif;
      font-size: 15px;
  }
  </code></pre>
  
  <p>This is what it currently looks like : <a href="http://imgur.com/0GVums0" rel="nofollow">http://imgur.com/0GVums0</a></p>
  
  <p>Thankyou for any help </p>