Center single- AND multi-line li text vertically
this is a most crossbrowser solution
li {
width : 200px;
line-height : 100px;
height : 100px;
border : 1px blue solid;
}
li span {
display : -moz-inline-box; /* FF2 or lower */
display : inline-block; /* FF3, Opera, Safari */
line-height : normal;
vertical-align : middle;
}
li span { *display : inline;} /* haslayout for IE6/7 */<ul>
<li><span>My text</span></li>
<li><span>My longer text</span></li>
<li><span>My text, but this time is really wide</span></li>
<li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>I used star hack for brevity, you should avoid. Just use html5boilerplate solution, it uses conditional comments on body tag
li {
height:200px;
line-height:200px;
border:1px solid red;
}
li span {
vertical-align:middle;
display:inline-block;
line-height:1.2;
}
<li>
<span>two<br />lines</span>
</li>
It should work.
EDIT : updated to see changes