Akan menggunakan CSS untuk memusatkan kandungan dan menambah kandungan tambahan di sebelah kanan div

Question

Bagaimana saya boleh memaparkan kandungan di tengah-tengah div dan ikon di sebelah kanan. Kandungan yang diberikan pada masa ini adalah seperti berikut:

Tetapi saya harap ia seperti ini:

Pemberitahuan 50% di atas terdapat pada ikon div的中心，pencil di sebelah kanan.

.w-100 {
  width: 100%;
}

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

Answer 1

Anda boleh menggunakan Flexbox untuk mencapai ini...

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

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

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