我正在尝试垂直对齐 UL 内的文本。问题是某些列表项具有不止一行文本,因此无法使用行高。
小提琴:http://jsfiddle.net/jaAYT/ http://jsfiddle.net/jaAYT/
这是我想要达到的结果:http://img402.imageshack.us/img402/7979/menuor.jpg 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
rule:
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
查看更新fiddle http://jsfiddle.net/PjA6s/.
08/14/13看到这个answer https://stackoverflow.com/questions/5166574/vertical-align-text-in-block-element对于当前语法。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)