使用css进行星级评分 - 如何将文本值与图标对齐，以使它们具有相同的高度和大小

Question

我需要创建一个星级评分，我希望它看起来与图像完全一样（）。我使用谷歌图标作为星星和数值。但是，我不知道如何将此值与图标对齐，以便它们位于同一行。目前“（50％）”略低于星形图标的基线。我试图将数值显示为块并给它边距和填充，但这没有帮助。

现在这是我的HTML：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
<span id="rating">(50%)</span>

任何帮助或技巧建议都将不胜感激！

Answer 1

由于某种原因，图标会自动对齐到顶部。因此，如果您使用vertical-align: bottom;，则它们将具有与文本相同的基线。

＆＃13;

＆＃13;

.star-wrapper i {
 vertical-align: bottom;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="star-wrapper">
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star</i>
<i class="material-icons">star_border</i>
<span id="rating">(50%)</span>
</div>

＆＃13;

＆＃13;

＆＃13;