title: Horizontally align image replaced text
body: <p>Perhaps I'm being a bit thick today but I'm in need of some CSS help. I'm working on a seemingly-simple product review display. It's a div (.rating), in which are two elements:</p>
  
  <ol>
  <li><code>&lt;strong class="score fourStars"&gt;Rated 4 out of 5 stars&lt;/strong&gt;</code></li>
  <li><code>&lt;span class="reviewsCount"&gt;average from 34 reviews&lt;/span&gt;</code></li>
  </ol>
  
  <p><strong>HTML fragment:</strong></p>
  
  <pre><code>&lt;div class="rating"&gt;
    &lt;strong class="score fourStars"&gt;customer rating 4 out of 5 stars&lt;/strong&gt; &lt;span class="reviewsCount"&gt;from 34 reviews&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.rating {
     overflow: auto;
     text-align: center;
  }
  .score {
     display: block;
     float: left;
     width: 50px;
     background: transparent url(http://images2.drct2u.com/content/common/images/commongui/productReviewRatingStars.png) no-repeat 0 50%;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden; /* hide text, phark image replacement (new technique)
     http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
  }
  .score.fourStars {
     background-position: -1200px 50%;
  }
   ...
  </code></pre>
  
  <p><strong>The problem</strong></p>
  
  <p>I've got the thing working from the sprite just nicely. The issue is now how to get it to be centrally aligned?! I was looking to inline-block to save me but, apparently, it has to work IE7. Damnit.</p>
  
  <p><strong>Basic Visual Example</strong></p>
  
  <pre><code>[          [score.fourStars][.reviewCount]          ]
  </code></pre>
  
  <p>Perhaps I'm missing something obvious. Perhaps someone can point me in the direction of the light. Setting text-align: center only seems to align the number of reviews part but not the image-replaced review stars.</p>
  
  <p>Help...</p>