垂直对齐多行文本（菜单元素）？ [英] Vertically align more than one line of text (menu elements)?

问题描述

我试图垂直对齐UL内的文本。问题是一些列表项目有多行文本，因此不能使用行高。

小提琴： http://jsfiddle.net/jaAYT/

以下是我要达成的结果： http://img402.imageshack.us/img402/7979 /menuor.jpg

 < ul class =menu> 
< li> < a href =＃>< span>什么是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; 
} 
  

谢谢！
Cris

解决方案

将这些声明添加到 .menu li a rule：

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

查看更新 fiddle 。

08/14/13 查看此回答当前语法。

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

解决方案

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.

这篇关于垂直对齐多行文本（菜单元素）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！