将使用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}