title: Vertically align text on the right of the image
body: <p>There are many examples of vertically aligned text on the left of the image, but these same examples do not work if I attempt to place the text on the right side of the image.</p>
  
  <p>On working example for the text on the left of the image is this: <a href="http://jsfiddle.net/rVTcv/" rel="nofollow">http://jsfiddle.net/rVTcv/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="height:259px;" class="how-right"&gt;
      &lt;img src="img/how-it-works/num-1.PNG" width="267px" height="259px"&gt;
      &lt;span&gt;JivaWay has a simple system to get you in shape in just 6 weeks.  And it's so easy to follow, even people who have never exercised before can do it.&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.how-right img {
      float:right;
      margin-left:20px;
      vertical-align:middle;
  }
  span {
      height: 259px;            
      display: table-cell;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>If I attempt to move the text on the right by <strong>moving</strong> the <code>float:right</code> property of the image to the text, then I don't get the expected result.</p>