html - 画像置換テキストを水平方向に整列

Question

今日は少し太っているかもしれませんが、CSS のヘルプが必要です。一見シンプルな商品レビュー表示に取り組んでいます。これは div (.rating) で、次の 2 つの要素があります。

1. <strong class="score fourStars">Rated 4 out of 5 stars</strong>
2. <span class="reviewsCount">average from 34 reviews</span>

HTML フラグメント:

<div class="rating">
  <strong class="score fourStars">customer rating 4 out of 5 stars</strong> <span class="reviewsCount">from 34 reviews</span>
</div>

CSS

.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%;
}
 ...

問題

スプライトからうまく機能するようになりました。問題はどうやって中央揃えにするか!? 私を救うためにインラインブロックを探していましたが、どうやらIE7で動作する必要があります。くそ。

基本的な視覚的な例

[          [score.fourStars][.reviewCount]          ]

おそらく、私は明らかな何かを見逃しています。おそらく、誰かが私を光の方向に向けることができます. text-align: center を設定すると、レビュー部分の数だけが整列するように見えますが、画像に置き換えられたレビューの星は整列しません。

ヘルプ...