Question

也许我今天有点厚，但我需要一些CSS帮助。我正在开展一个看似简单的产品评论展示。它是一个div（.rating），其中有两个元素：

<strong class="score fourStars">Rated 4 out of 5 stars</strong>
<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似乎只是对齐评论部分的数量而不是图像替换的评论星。

...帮助

水平对齐图像替换文本

0 个答案: