垂直對齊多行文本（菜單元素）？

Question

我正在嘗試垂直對齊 UL 內的文本。 問題是某些列表項的文本不止一行，因此不能使用行高。

小提琴： 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;

請參閱更新的小提琴。

2013 年 8 月 14 日請參閱此答案以了解當前語法。

Answer 2

這是更新的小提琴

Answer 3

這不是最漂亮的事情，如果鏈接是動態生成的，它將無法工作，但是您可以只用一兩行向那些跨度添加特殊類，然后在頂部添加一些padding以使文本居中。

.oneLine {display:block; padding-top:1.25em;}
.twoLines {display:block; padding-top:.75em;}

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

http://jsfiddle.net/jasongennaro/4MWTj/