您可以使用flexbox来完成此操作...

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

可以在父元素上使用display:flex，在要拉伸的元素上使用flex-grow: 1。
请参见下面的片段：

.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 1px solid lightgray;
}

p {
  text-align:center;
  flex-grow: 1;
}

<div class="content">
  <p>50%</p>
  <img src="https://icons.iconarchive.com/icons/custom-icon-design/mono-general-2/24/edit-icon.png" width="24" height="24" />
</div>

您可以通过两种方式完成此操作：

• 标准弹性框方法。使用对齐项：center将文本放在中间但是有一个陷阱，如果有两个项堆叠在一起，并且顶部的图标是50像素宽，而下面的图标是80像素宽，那么居中对齐的元素可能无法正确地在顶部对齐。
• 要确保元素100%位于中间，请使用3个div，并使用flex-grow：1来制作3个等宽的容器，然后使用边距将子元素定位到中心或右侧。

还可以看看stackoverflow的类似答案

.container {
  display: flex;
  width: 100%;
}

.container>div {
  flex-grow: 1;
  display: flex;
}

.container>div:nth-child(2)>p {
  margin-inline: auto;
}

.container>div:last-child>img {
  margin-left: auto;
}

<div class="container">
  <div></div>
  <div>
    <p>50%</p>
  </div>
  <div>
    <img src='https://placekitten.com/50/50' />
  </div>
</div>