如何实现div内内容居中且图标居右的CSS布局效果？

现有代码如下，当前布局中<p>与<img>垂直排列，<p>内容左对齐；需要实现<p>内容水平居中，<img>固定在div右侧，且两者垂直居中对齐的效果。

现有CSS代码：

.w-100 {
  width: 100%;
}

现有HTML代码：

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

解决方案：Flex布局实现 #

通过Flex布局可以简洁高效地达成需求，修改.w-100的CSS规则，并为<img>添加定位样式：

修改后的完整CSS：

.w-100 {
  width: 100%;
  display: flex; /* 启用Flex布局，让子元素横向排列 */
  align-items: center; /* 子元素垂直方向居中对齐 */
  justify-content: center; /* 让<p>在容器水平方向居中 */
}

.w-100 img {
  margin-left: auto; /* 自动填充左侧空间，将img推到容器最右侧 */
}

逻辑说明：

• display: flex将容器转换为Flex容器，子元素默认横向排列；
• align-items: center确保<p>和<img>在垂直方向保持居中，避免因元素高度不同导致错位；
• justify-content: center让<p>占据剩余空间的中间位置；
• margin-left: auto是关键：利用Flex布局的自动边距特性，将<img>的左侧空间自动填充，从而把它固定在容器右侧，同时不影响<p>的居中效果。

如果需要避免图标紧贴容器边缘，可在.w-100中添加padding: 0 1rem;（根据需求调整数值）来增加内边距。

内容的提问来源于stack exchange，提问作者Alwaysblue