如何在div内的文本上方放置图片并对齐文本右侧末尾？

核心思路 #

要实现图片覆盖在居中文本的最后一个字符上方并对齐右侧，需要利用父元素相对定位+图片绝对定位的组合，同时通过调整偏移量精准对齐。

可行代码示例 #

HTML结构

<div class="text-container">
  <span class="content">这是一段居中显示的文本</span>
  <img src="你的图片地址" alt="图标" class="overlay-img">
</div>

CSS代码

.text-container {
  text-align: center;
  position: relative; /* 作为图片绝对定位的参考容器 */
  display: inline-block; /* 容器宽度适配文本长度，避免偏移误差 */
  margin: 0 auto; /* 保持整体居中 */
}

.overlay-img {
  position: absolute;
  width: 20px; /* 按需调整尺寸 */
  height: 20px;
  right: 0; /* 对齐文本最右侧 */
  top: 50%; /* 与文本垂直居中对齐 */
  transform: translateY(-50%); /* 修正垂直居中的偏移问题 */
  z-index: 1; /* 确保图片覆盖在文本上方 */
}

关键细节说明 #

• 父容器设置position: relative，让图片的绝对定位以该容器为基准，而非整个页面。
• display: inline-block让父容器宽度刚好匹配文本长度，保证图片right: 0能精准对齐文本末尾。
• 原代码的问题：position: relative不会让元素脱离文档流，无法实现覆盖效果；且存在语法错误——width; 100px应改为width: 100px。

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