Vertical align navigation link text - html

Question

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.
I have tried adding this to the links .home .reviews .store .contact, however this just moves the border.
padding-top:20px;
margin-top:20px;
Here is my HTML:
<div id="navigation">
<nav class="navbar">
<div class="navbarcontainer">
<ul class="nav navbar-nav">
<li class="home">Home</li>
<li class="reviews">Reviews</li>
<li class="store">Store</li>
<li class="contact">Contact</li>
</ul>
</div>
</nav>
Here is my CSS:
/* 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;
}
This is what it currently looks like : http://imgur.com/0GVums0
Thankyou for any help

Answer 1

You can use line-height property on links to vertically center:
a:link, a:visited {
text-decoration: none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
line-height: 60px;
}
Or, you can also use vertical-align: middle, but keep in mind that this approach is not fully compatible with all browsers (IE8+).
li {
display:table;
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;
display: table-cell;
vertical-align: middle;
}

Answer 2

One way to do it:
li {
display: block;
float: left;
border: 1px black solid;
}
a {
padding: 19px 12px;
display: block;
}
a:link, a:visited {
text-decoration: none;
color: #000;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
}
Codepen example