La question semble être que certaines lettres comme g
, y
, q
, etc. , qui ont une queue vers le bas des pentes, ne permettent pas de centrage vertical. Voici une image pour présenter le problème .
Les personnages dans la boîte verte sont fondamentalement parfaits, car ils n'ont pas de queue vers le bas. Ceux dans la case rouge montrent le problème.
J'aimerais que tous les personnages soient parfaitement centrés verticalement. Dans l'image, les personnages avec une queue vers le bas ne sont pas centrés verticalement. Est-ce possible de rectifier?
Voici le violon qui illustre pleinement le problème .
.avatar {
border-radius: 50%;
display: inline-block;
text-align: center;
width: 125px;
height: 125px;
font-size: 60px;
background-color: rgb(81, 75, 93);
font-family: "Segoe UI";
margin-bottom: 10px;
}
.character {
position: relative;
top: 50%;
transform: translateY(-50%);
line-height: 100%;
color: #fff;
}
<div class="avatar">
<div class="character">W</div>
</div>
<div class="avatar">
<div class="character">y</div>
</div>
v
dans y
et la o
partie dans le g
sont sur la même ligne que le point le plus bas pour les majuscules. Avec votre logique, Å, Ä, Ö seraient alignés tout comme A et O mais ils ne peuvent pas l'être. Si vous voulez faire quelque chose de spécial à ce sujet, vous devez utiliser javascript pour vérifier s'il s'agit d'une petite majuscule, puis pousser le caractère de quelques caractères.