垂直对齐多行文本（菜单元素）？
我正试图在UL内部垂直对齐文本。 问题是某些列表项有多行文本，因此不能使用行高。
小提琴： http ： //jsfiddle.net/jaAYT/
这是我想要实现的结果： http ： //img402.imageshack.us/img402/7979/menuor.jpg
这是我的HTML：
这是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;
看到更新的小提琴 。
08/14/13有关当前语法，请参阅此答案 。
这是更新的小提琴
这不是最漂亮的事情，如果链接是动态生成的，它将不起作用，但是您可以只为一行或两行添加特殊类，然后在顶部添加一些padding以使文本居中。
.oneLine {display:block; padding-top:1.25em;} .twoLines {display:block; padding-top:.75em;}