如何在居中h1元素中添加图片且不改变文本对齐方式？

当然可以实现！你遇到的问题是因为图片和文本处于同一文档流中，浏览器会把「图片+文本」作为一个整体来居中，自然会让文本偏离原本的页面中心。要让文本保持原居中位置，关键是让图片脱离文本的布局流，不影响文本的居中计算。

这里有个完美满足你需求的实现方式：

<h1 style="text-align: center;">
  <span style="position: relative;">Centered Text
    <img src="logo.png" alt="logo" style="position: absolute; right: 100%; margin-right: 20px; top: 50%; transform: translateY(-50%); width: 50px; height: auto;">
  </span>
</h1>

原理拆解： #

1. 用span包裹文本：让文本成为一个独立的定位参考容器，确保它的居中不受图片干扰。
2. span设置相对定位：给图片的绝对定位提供参考基准。
3. 图片绝对定位：
   • right: 100%：让图片的右侧对齐到span的左侧边缘
   • margin-right: 20px：给图片和文本之间留出20px的间距
   • top: 50%; transform: translateY(-50%)：让图片垂直居中对齐文本，不管文本行高是多少都能适配
4. h1保持文本居中：span会正常继承h1的text-align: center属性，始终保持在页面水平中心，图片只是「挂」在它的左侧，完全不影响它的位置。

如果想让代码更易维护，建议把样式抽出来写成CSS类：

h1 {
  text-align: center;
}

.centered-heading-text {
  position: relative;
}

.heading-logo {
  position: absolute;
  right: 100%;
  margin-right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; /* 可以根据需要调整图片尺寸 */
  height: auto;
}

对应的HTML：

<h1>
  <span class="centered-heading-text">Centered Text
    <img src="logo.png" alt="logo" class="heading-logo">
  </span>
</h1>

这个方案的好处：

• 不管图片尺寸怎么变，文本始终稳稳地在页面原居中位置
• 图片和文本的间距固定为20px，不会乱跑
• 图片不会紧贴页面左侧，它的位置跟着居中的文本走，页面宽度变化时也能保持相对位置
• 垂直对齐适配各种文本行高，不会出现图片上下错位的情况

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