Verwendet CSS, um den Inhalt zu zentrieren und zusätzlichen Inhalt rechts vom Div hinzuzufügen

Question

Wie kann ich Inhalte in der Mitte eines Divs und eines Symbols auf der rechten Seite anzeigen? Der aktuell angegebene Inhalt ist wie folgt:

Aber ich wünschte, es wäre so:

Die oben genannten 50 %-Benachrichtigungen befinden sich auf dem div的中心，pencil-Symbol auf der rechten Seite.

.w-100 {
  width: 100%;
}

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

Answer 1

您可以使用 Flexbox 来实现此目的...

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

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

  
{value}