I want the text in the <li> tags to be vertically aligned to the middle of the element.

gistfile1.html

<ul class="step-by-step">
    <li class="step step-1"><a class="button" href="/signup" title="Sign Up for free">Sign Up <span>for free</span></a></li>
    <li class="step step-2">Sign up to set up rewards</li>
    <li class="step step-3">TELL YOUR FOLLOWERS WHAT THEY COULD EARN BY RECOMMENDING YOUR SERVICE</li>
    <li class="step step-4">THE MORE THEY SHOUT ABOUT YOU ON THEIR SOCIAL NETWORKS. THE MORE POINTS THEY EARN AND THE MORE PEOPLE HEAR ABOUT YOU.</li>
    <li class="step step-5">YOU REWARD THEM FOR HELPING YOUR VIRAL CAMPAIGN SPREAD</li>
    <li class="step step-6">SEE WHO ARE YOUR MOST INFLUENTIAL CUSTOMERS &amp; MAYBE REWARD THEM SOME MORE? </li>
</ul><!-- /.step-by-step -->