title: align text in a span tag
body: <p>I am trying to setup a arrow navigation where I have a next and previous button.
  Needs to be supported in IE 7 and up.</p>
  
  <p>For the next I want the background image to show to the right of the next text.
  Then of the previous button I want the text to show to the left side of the previous text.
  I thought this would be easy but I just spent 2 hours on it.</p>
  
  <p>Anyone can help with this before I go crazy.</p>
  
  <pre><code>&lt;span class="next"&gt;
  &lt;a href="#"&gt;Next Month&lt;/a&gt;
  August
  &lt;/span&gt;
  
  
  &lt;span class="prev"&gt;
  &lt;a href="#"&gt;Previous Month&lt;/a&gt;
  June
  &lt;/span&gt;
  </code></pre>
  
  <p>In my css I have this for the left button and it works great.</p>
  
  <pre><code>.prev a, .next a {
      background: url("sprite.png") no-repeat scroll -200px -5px transparent;
      display: inline-block;
      height: 25px;
      text-decoration: none;
      text-indent: -9999em;
   }
  
  .prev {
    float: left; 
  }
  
  .next {
    float: right; 
  }
  
  .next a {
     background-position: -200px -18px; 
  }
  </code></pre>