Moving text in a menu button - html

Question

I have been trying everything I can think of, (not very good at this)
Im trying to center the text in those buttons vertically, here is the code:
<div id="menu">
<ul class="clearfix">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-hdd-o"></i> Services</li>
<li><i class="fa fa-area-chart"></i> Pricings & plans</li>
<li><i class="fa fa-envelope"></i> Contact</li>
<li><i class="fa fa-users"></i> The Team</li>
<!-- <li><i class="fa fa-sign-in"></i> Login</li>
<li><a href="#"><i class="fa fa-user"></i> Register</li>-->
</ul>
and the CSS:
#menu {
margin: 20px auto 0 auto;
width: 60%
}
#menu ul {
padding:0px;
list-style-type:none;
}
#menu a {
background-color: #EBEBEB;
font-size: 15px;
line-height: 10px;
height: 60px;
width: 100px;
position: relative;
padding: 0 20px;
float: left;
margin-top: 5px;
display: block;
color: #385c5b;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
border-color:#eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin-bottom: 5px;
}
#menu a:hover {
background-color:#5ba4b5;
}
#menu li {
float:left;
display:block;
margin-right:5px;
}
Thanks for any replies or other techniques.

Answer 1

You can use line-height see this http://jsfiddle.net/sfnxkav5/
#menu ul li a{
line-height:50px;
}
This won't center it exactly but it is suitable for the height you have given

Answer 2

You can use display:table-cell on the anchor tags
JSfiddle Demo
#menu {
margin: 20px auto 0 auto;
width: 60%
}
#menu ul {
padding: 0px;
list-style-type: none;
}
#menu a {
background-color: #EBEBEB;
font-size: 15px;
height: 60px;
width: 100px;
position: relative;
padding: 0 20px;
margin-top: 5px;
color: #385c5b;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
border-radius: 3px 3px 0 0;
border-color: #eaeaea;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
display: table-cell;
vertical-align: middle;
}
#menu a:hover {
background-color: #5ba4b5;
}
#menu li {
float: left;
display: block;
margin-right: 5px;
margin-bottom: 5px;
}
<div id="menu">
<ul class="clearfix">
<li><i class="fa fa-home"></i> Home
</li>
<li><i class="fa fa-hdd-o"></i> Services
</li>
<li><a id="a" href="#"><i class="fa fa-area-chart" ></i> Pricings & plans</a>
</li>
<li><i class="fa fa-envelope"></i> Contact
</li>
<li><i class="fa fa-users"></i> The Team
</li>
<!-- <li><i class="fa fa-sign-in"></i> Login</li>
<li><a href="#"><i class="fa fa-user"></i> Register</li>-->
</ul>