Vertical align multiline text inside <li>

by Shrikrishna Gupta

HTML

<div>

<ul>
    <li><span>Some text</span></li>
    <li><span>Some text<br />some more text</span></li>
    <li><span>some test text</span></li>
    <li><span>even more text<br />and more</span></li>
</ul>

</div>


<div>

</div>

CSS

ul li {
    display: block;
    height: 3em;    
    line-height: 12px;
    border: 1px solid #ff0000;
}

ul li span {
    display: inline-block;  
    vertical-align: middle;     
}

ul li:before{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;       
}