Html 垂直居中的一行和两行文本按钮

我认为这是一个简单的按钮，但我有一排按钮：一个是一个短单词，两个是3个长单词，因此它们可以运行到两行

如何使它们垂直居中于按钮中心？我尝试了一些不同的显示方式：表格单元格等，但无法完全正确显示

一些代码：

<div id="button_menu">  

<ul>
<li class='faq'><a href="#" tabindex="27">FAQs</a></li>
<li class='map'><a href="#" tabindex="28">Interactive Property Map</a></li>
<li class='request'><a href="#" tabindex="29">Request a Presentation</a></li>
</ul>
</div>

提前谢谢

#button_menu {
    font-family:"adelle", Georgia, Times, serif;
    font-size:12px;
    font-weight:700;
    float:right;

    position:relative;
}

#button_menu ul{
    list-style:none;
    margin:40px 10px 0px 0px;
    padding:0px;
    display:table;
    border-spacing:5px;
}

#button_menu ul li{
    display: table-cell;
    text-align:center;
    line-height:18px;
    height:45px;    
    padding:0px;
    vertical-align:middle;

   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px; /* future proofing */
}

---

JS FIDDLE：重要-您必须使用边框间距，而不是边距，因为边距不能应用于显示：表格单元格元素。更多信息：

是的，这就是我使用“显示：表格单元格”时遇到的问题……似乎没有办法在每个按钮的左侧添加边距。非常感谢。