Html 在菜单按钮中移动文本

我一直在尝试我能想到的一切，（这方面不是很好） 我正在尝试将这些按钮中的文本垂直居中，下面是代码：

<div id="menu">
            <ul class="clearfix">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#"><i class="fa fa-hdd-o"></i> Services</a></li>
                <li><a href="#"><i class="fa fa-area-chart"></i> Pricings & plans</a></li>
                <li><a href="#"><i class="fa fa-envelope"></i> Contact</a></li>
                <li><a href="#"><i class="fa fa-users"></i> The Team</a></li>
              <!--  <li><a href="#"><i class="fa fa-sign-in"></i> Login</a></li>
                <li><a href="#"><i class="fa fa-user"></i> Register</li>-->
            </ul>

---

感谢您的回复或其他技巧。

您可以使用

行高

查看此

---

这不会使它精确居中，但它适合您给定的高度

您可以在锚定标记上使用

display:table cell

#菜单{
保证金：20px自动0自动；
宽度：60%
}
#菜单ul{
填充：0px；
列表样式类型：无；
}
#菜单a{
背景色：#ebebebeb；
字体大小：15px；
高度：60px；
宽度：100px；
位置：相对位置；
填充：0 20px；
边缘顶部：5px；
颜色：#385c5b；
字母间距：0.5px；
文本转换：大写；
字体大小：粗体；
文本对齐：居中；
文本阴影：1px1px1pRGBA（255,255,255,0.3）；
边界半径：3px3px0；
边框颜色：#eaeaea；
盒影：1px1p5pRGBA（0,0,0,0.7）；
显示：表格单元格；
垂直对齐：中间对齐；
}
#菜单a：悬停{
背景色：5ba4b5；
}
#菜单里{
浮动：左；
显示：块；
右边距：5px；
边缘底部：5px；
}

部分有效，唯一的问题是选项卡上的“价格和计划”文本块“计划”从框中向下移动。对于此“价格和计划”，您需要设置特定的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;
}

#menu ul li a{
line-height:50px;
}