vertical-align: bottom仅对inline/inline-block元素在非flex/grid父容器中有效；失效主因是父容器为flex/grid时该属性被忽略，稳定方案是flex布局配合align-items: flex-end。

直接用 vertical-align: bottom 很可能没效果——它只在 inline 或 inline-block 场景下起作用，且受父容器布局类型严格限制；真正稳定可控的方案是 flex 布局 + align-items: flex-end。

为什么 vertical-align: bottom 有时失效？

这个属性常被误认为“让元素底边对齐”，其实它只影响行内级（inline/inline-block）元素在行框（line box）内的对齐位置。一旦父容器设了 display: flex 或 display: grid，vertical-align 就完全被忽略——浏览器根本不会计算行框。

• 常见错误：给 <div> 设 <code>display: flex，里面放多个 <img>，再给 <img> 加 vertical-align: bottom → 无效
• 另一个坑：图片是 inline 元素，但父级用了 text-align: center，你以为居中了，其实只是文本对齐，垂直方向仍按 baseline 对齐
• 兼容性没问题，但逻辑前提错了——不是属性不好用，而是用错了上下文

flex 布局下底部对齐的正确写法

当多张高度不同的图需要严格底边对齐（比如产品图+文字说明组合），flex 是目前最可靠、语义最清晰的方案。


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
• 容器设 display: flex 和 align-items: flex-end，所有子项（包括 <img>）自动按底边对齐
• 如果图带 <figcaption></figcaption>，建议把每张图和标题包进一个 <figure></figure>，再让 <figure></figure> 作为 flex 子项，避免图片单独对齐后标题错位
• 注意：不要同时设 justify-content: center 和 align-items: flex-end 后又给图片加 margin，容易引发意外偏移

.gallery {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.gallery figure {
  margin: 0;
}
.gallery img {
  display: block; /* 防止 inline 默认间隙 */
  max-width: 100%;
  height: auto;
}

inline-block 场景下 vertical-align 的实操要点

如果你必须保留 inline-block（比如旧项目不能改结构），那 vertical-align 还能用，但得满足三个条件：

• 父容器不能是 flex/grid，推荐用 font-size: 0 消除换行空白，再给子项单独设字体大小
• <img> 必须显式设 vertical-align: bottom（默认是 baseline，会和文字基线对齐，留出降部空间）
• 如果图旁有文字，文字也要同步设 vertical-align: bottom，否则图文之间仍有错位

示例：<div style="font-size: 0"> <img src="a.jpg" style="max-width:90%"><span style="vertical-align: bottom; font-size: 14px">描述</span> </div>

容易被忽略的细节：图片加载前的高度抖动

多图并排时，如果没设宽高或 aspect-ratio，图片加载瞬间会从 0 高度撑开，导致底部对齐短暂失效——用户看到的是“先乱后齐”。

• 解决方法：给 <img> 加 aspect-ratio: 4 / 3（按实际比例调整），或用 height: 0; padding-bottom: 75% 的 hack 方式占位
• 别依赖 object-fit 来“修”对齐——它只控制内容裁剪，不改变盒模型尺寸
• 如果图来自 CMS 或用户上传，尺寸不可控，优先用 flex + min-height + overflow: hidden 控制容器底线