垂直对齐多行文本（菜单元素）？

Question

I'm trying to vertically align the text inside an UL. Problem is that some list items have more than one line of text and therefore cannot use line-height.

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

Here's the result I want to achieve: http://img402.imageshack.us/img402/7979/menuor.jpg

Here's my 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>

Here's the 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;
}

Thank you! Cris

Answer 1

Add these declarations to the .menu li a rule:

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

See updated fiddle .

08/14/13 See this answer for current syntax.

Answer 2

Here is the updated fiddle

Answer 3

It's not the prettiest thing to do and it will not work if the links are dynamically generated, but you could add special classes to those spans with one or two lines only and then add some padding at the top to center the text.

.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/