將使用CSS將內容居中，並在div的右側添加其他內容

Question

如何才能在 div 的中心顯示內容並在右側顯示圖示。目前給出的內容如下：

但我希望它是這樣的：

上面50%的通知在div的中心，pencil的圖示在右邊。

.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}