如何实现H1标题与相邻图片的完美行内对齐

解决方法 #

你遇到的对齐偏差本质是<h1>默认行高、字体基线和图片高度不匹配导致的，vertical-align: middle受行高和基线影响很难做到完全精准对齐，可通过以下两种方案解决：

方案1：给<h1>也开启flex布局（最稳定，无兼容问题）

直接将h1设为flex容器，内部元素直接按交叉轴居中，彻底规避基线、行高的影响，还可以通过gap自由控制图片和文字的间距：

<div style="display: flex; align-items:center;">
    <h1 style="margin: 0; color: #333; padding: 0.6rem; display: flex; align-items: center; gap: 8px;">
        <img src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg" width="40" height="40" alt="红方块图标" />
        My Text
    </h1> 
</div>

方案2：统一行高配合vertical-align（适合不想改flex结构的场景）

将<h1>的行高设为和图片一致的40px，保证文字的行高框和图片高度完全匹配，此时vertical-align: middle就能实现精准对齐：

<div style="display: flex; align-items:center;">
    <h1 style="margin: 0; color: #333; padding: 0.6rem; line-height: 40px;">
        <img style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg" width="40" height="40" alt="红方块图标" />
        My Text
    </h1> 
</div>

如果调整后还有细微的像素级偏差，属于不同字体的原生基线偏移问题，可以给文字外包裹一个<span>，加transform: translateY(1px)之类的微调即可，数值按需调整。

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