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

我试图垂直对齐UL中的文本。问题是某些列表项有多行文本，因此无法使用行高。垂直对齐多行文本（菜单元素）？

这是我想达到的效果：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; 
}

谢谢！克里斯

来源

2011-06-12 Cris

你想如何垂直对齐它们（例如顶部，中间，底部）？ – melhosseiny 2011-06-12 18:24:26

我希望他们在中心。我添加了一张照片来描述我想要的内容：http://img402.imageshack.us/img402/7979/menuor.jpg – Cris 2011-06-12 18:53:52

添加这些声明的.menu li a规则：

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

查看更新后的fiddle。

08/14/13查看此answer获取当前语法。

来源

2011-06-12 18:55:59 melhosseiny

美丽的作品！它在中间垂直对齐，就是我需要它的方式。你为我节省了很多时间！关于其他评论：它只需要“文本对齐：中心”的文字在中间。再次感谢！ – Cris 2011-06-12 19:06:07

我检查过，它只能在Chrome中使用。 Firefox，Opera和IE不正确？有什么建议么？谢谢。 – Cris 2011-06-14 08:59:12

在指出浏览器支持的情况下建议Flexbox有点不负责任：http://caniuse.com/flexbox（*为什么我要这么说？* http://stackoverflow.com/questions/6342755/how-to-vertically - 中心 - 多于一行的文本 - 仅在Chrome上） – thirtydot 2011-06-14 11:47:06

这里是updated fiddle

来源

2011-06-12 18:22:36

我认为他的意思是里面的文字必须水平排列，这样看起来像是在同一行/行！ – Jawad 2011-06-12 18:33:00

是的，这就是我的意思;我希望里面的文字垂直对齐，以免混淆。这是我想要的图像：http://img402.imageshack.us/img402/7979/menuor.jpg – Cris 2011-06-12 18:53:04

这不是做最漂亮的事情，如果是动态生成的链接，它不会工作，但你可以只用再一个或两行的跨度添加特殊班在顶部添加一些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/

来源

2011-06-12 18:54:13

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

回答

相关问题