J'ai un petit cercle arrondi avec un numéro à l'intérieur d'un bouton. Comment centrer la travée verticalement à l'intérieur du bouton?
<button class="btn btn-primary w-50 my-4">
Comments Moderation <span class="approve-counter rounded-circle bg-danger text-white text-center float-right">5</span>
</button>
CSS:
.approve-counter {
width: 20px;
height: 20px;
line-height: 20px;
}
Comme vous pouvez le voir, le cercle rouge n'est pas exactement vertical au milieu du bouton bleu
Violon: https://jsfiddle.net/vour83s9/
Vous pouvez utiliser flex et align-items: centerpour centrer verticalement tous les éléments du bouton. Appliquez les styles suivants à votre élément de bouton:
.btn {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
Ou mieux encore, vous pouvez simplement utiliser les classes Bootstrap 4 dans votre buttonbalise pour obtenir le même résultat:
<button class="d-flex align-items-center justify-content-between btn btn-primary w-50 my-4">
Comments Moderation <span class="approve-counter rounded-circle bg-danger text-white text-center float-right">5</span>
</button>
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots