Utilisera CSS pour centrer le contenu et ajouter du contenu supplémentaire à droite du div

Question

Comment afficher le contenu au centre d'un div et une icône sur le côté droit. Le contenu actuellement proposé est le suivant :

Mais j'aurais aimé que ce soit comme ça :

Les notifications ci-dessus de 50 % se trouvent sur l'icône div的中心，pencil à droite.

.w-100 {
  width: 100%;
}

<div class="w-100">
  <p>{value}</p>
  <img src="https://via.placeholder.com/50" />
</div>

Answer 1

Vous pouvez utiliser Flexbox pour y parvenir...

.w-100 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img-icon {
  align-self: end;
}

  
{value}