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
Here is the updated fiddle
It's not the prettiest thing to do and it will not work if the links are dynamically generated, but you could add special classes to those spans with one or two lines only and then add some padding
at the top to center the text.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.