0

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

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

问题

我已经很好地从精灵中得到了这个东西。现在的问题是如何让它集中对齐？！我一直在寻找 inline-block 来拯救我，但显然它必须在 IE7 上工作。该死的。

基本视觉示例

[          [score.fourStars][.reviewCount]          ]

也许我错过了一些明显的东西。也许有人可以指出我的光的方向。设置 text-align: center 似乎只对齐评论部分的数量，而不是图像替换的评论星。

帮助...

4

0 回答 0