Annie H. Annie H. - 3 years ago 164
CSS Question

Star rating with css - how to align text value with icons, so that they are the same height and size

I need to create a star rating and I want it to look exactly as on the image (enter image description here). I used google icon for stars and and for numeric value. However, I don't know how to align this value with icons so that the would be on the same line. For now "(50%)" are slightly below the baseline of star icons. I tried to display numeric value as a block and give to it margins and paddings, but this didn't help.

Here's my HTML by now:

<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>


Any help or trick-suggestions would be appreciated!

Answer Source

For some reason the icons are automatically aligned to the top. So if you use vertical-align: bottom; they will then have the same baseline as the text.

.star-wrapper i {
 vertical-align: bottom;
}
<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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download