HTML文本内手铐图片与文字底部对齐居中问题求助

核心修改思路 #

• 移除导致图片脱离文本流的position:absolute，让图片留在文字所在行内
• 用vertical-align: bottom实现图片与文字底部对齐
• 调整图片尺寸避免破坏排版，同时添加间距优化视觉效果

修改后的CSS代码 #

/* 保留原有其他样式，仅修改.cuffs相关规则 */
.cuffs {
    vertical-align: bottom; /* 关键：让图片与文字底部对齐 */
    width: 24px; /* 根据文字大小调整，这里示例使用24px */
    margin: 0 4px; /* 左右添加间距，避免和文字挤在一起 */
}
/* 删除.divcuffs的样式，因为不再需要这个包裹div */

修改后的HTML代码（仅修改对应段落） #

<p>你现在可以把他带到 <img src="https://i.imgur.com/YHg6fgD.png" class="cuffs"> 关押，如果你属于<a target="_blank" class="links" href="../factions/factions.html" style="color:#1457e6">政府阵营</a>；或者把他带到 <img src="https://i.imgur.com/XB8pjkf.png" class="cuffs"> 绑架，如果你是<a target="_blank" class="links" href="../factions/factions.html" style="color:#FF400E">罪犯</a></p>

为什么之前的方法无效？ #

• position:absolute会让图片脱离正常文本流，不再受文字排版约束，自然无法和文字对齐
• 手动添加空白空格属于硬编码方式，适配性极差，在不同屏幕尺寸或字体大小下都会失效

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