Note avec css - comment aligner la valeur du texte avec des icônes, de sorte qu'ils aient la même hauteur et la même taille

Question

Je dois créer une note par étoiles et je veux qu'elle ressemble exactement à l'image (). J'ai utilisé google icon pour les étoiles et pour la valeur numérique. Cependant, je ne sais pas comment aligner cette valeur avec des icônes de sorte que le serait sur la même ligne. Pour l'instant "(50%)" sont légèrement en dessous de la ligne de base des icônes d'étoiles. J'ai essayé d'afficher la valeur numérique comme un bloc et lui donner des marges et des paddings, mais cela n'a pas aidé.

Voici mon HTML maintenant:

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

Toute aide ou trick-suggestions seraient appréciées!

Answer 1

Pour une raison quelconque, les icônes sont automatiquement alignées en haut. Donc si vous utilisez vertical-align: bottom; ils auront alors la même ligne de base que le texte.

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