label和img并排错位的根源是默认vertical-align:baseline导致基线对齐不一致；用vertical-align:middle可直接解决，配合line-height:normal、避免absolute定位，并在多组件时全局统一设置。

label 和 img 并排时底部错位的根源

错位不是因为图片没设 height，而是 label 和 img 默认对齐基线不同：label 按文字基线（baseline）对齐，img 默认也是 baseline，但其“基线”在图底部（非视觉底边），导致看起来下沉。加上验证码图常带 height 和 width 内联样式，又没重置 vertical-align，错位就更明显。

用 vertical-align: middle 统一对齐基准

这是最轻量、兼容性最好、也最直接有效的解法。不改结构、不加 wrapper、不碰 flex/grid，仅靠一行 CSS 就能拉齐：

• label 和 img 都显式设 vertical-align: middle
• 确保两者父容器没有干扰性的 line-height（可加 line-height: normal）
• 避免给 img 设 position: absolute——它会脱离文档流，后续元素布局不可控，且响应式下极易偏移
• 若 label 文字多行，vertical-align: middle 仍有效；但需配合 display: inline-block 或 flex 父容器防止换行挤压

更稳妥的并排结构：flex 包裹 + 固定宽度 label

当 label 文本长度差异大（如“验证码：” vs “请输入右侧图形验证码：”），单纯靠 vertical-align 不足以保证输入框列对齐。此时应把 label、input、img 三者包进一个 display: flex 容器里：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• 父容器设 display: flex; align-items: center; gap: 8px
• label 设 flex: 0 0 120px（覆盖最长文本，留余量）
• img 设 flex: 0 0 auto，并保留 vertical-align: middle（防 Safari 旧版渲染抖动）
• input 设 flex: 1，加 min-width: 0 防小屏溢出

验证码图片加载失败时的对齐保底

开发阶段常因路径错误或后端未启动导致 img 显示为缺省图标（小方块+叉），此时若没设宽高或 vertical-align，整个行高会突变、错位感更强：

立即学习“前端免费学习笔记（深入）”；

• 始终为 img 显式写 width 和 height（如 width="120" height="40"），哪怕只是占位尺寸
• 加 onerror="this.style.display='none'" 隐藏失效图，避免空白撑开布局
• 别依赖 alt 文字补位——屏幕阅读器会读，但视觉上仍是空缺；真要降级，用背景色 + 伪元素提示更可控

真正容易被忽略的是：同一页面多个验证码组件时，vertical-align 必须统一作用于所有相关元素，不能只调一个 img；否则局部对齐了，全局依然参差。