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

问题描述

| 我正在尝试在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;
}

谢谢！ 克里斯     

解决方法

        将这些声明添加到

.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日，请参阅此答案以获取当前语法。     ,        这是更新的小提琴     ,        这不是最漂亮的事情，并且如果链接是动态生成的，它将无法正常工作，但是您可以仅使用一两行将特殊类添加到这些跨度，然后在顶部添加一些“ 4”以使文本居中。

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