jquery - 垂直对齐多于一行的文本(菜单元素)？

Question

我正在尝试垂直对齐 UL 中的文本。问题是某些列表项有多于一行文本，因此不能使用行高。

fiddle :http://jsfiddle.net/jaAYT/

这是我想要实现的结果:http://img402.imageshack.us/img402/7979/menuor.jpg

这是我的 HTML:

<ul class="menu">
    <li> <a href="#"><span>WHAT IS TEAM X?</span></a> </li>
    <li> <a href="#"><span>COMPANY BENEFITS</span></a> </li>
    <li> <a href="#"><span>COMPANY, COMPANY DATA</span></a> </li>
    <li> <a href="#"><span>TEAM X COVERAGE</span></a> </li>
    <li> <a href="#"><span>COMPANY2 </span></a> </li>
    <li> <a href="#"><span>COMPANY3 </span></a> </li>
    <li> <a href="#"><span>LATEST CAMPAIGNS</span></a> </li>
    <li> <a href="#"><span>CONTACT</span></a> </li>
</ul>

这是 CSS:

.menu {
    float: left;
    margin: 0px 0px 0px 0px;
    width: 720px;
}
.menu li {
    float: left;
    position: relative;
}
.menu li a {
    width: 86px;
    height: 52px;
    padding: 15px 0px 15px 4px;
    display: block;
    float: left;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    background-color: #ccc;
}
.menu li a:hover {
    background-color: #000;
}

谢谢! 克里斯

Answer 1

将这些声明添加到 .menu li a 规则中:

display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;

查看更新 fiddle .

08/14/13 看这个answer当前语法。