WebStorm中图片对齐失效的主因是display与vertical-align组合不当、Flex父容器缺失display: flex、路径解析错误及盒模型干扰；应优先用Elements面板检查computed样式，再针对性调整。
WebStorm 里图片对齐不生效，先查 display 和 vertical-align 的组合
图片默认是 inline 元素，vertical-align 只对它起作用——但很多人写了 vertical-align: middle 却没效果，是因为父容器有行高、字体大小或基线干扰。常见错误是直接给 img 加 margin-top 硬调，结果换字体或改字号就偏了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
img设为display: inline-block或display: block，再配合vertical-align（仅对inline/inline-block有效） - 如果要和文字垂直居中，确保父元素没有意外的
line-height或font-size: 0（后者常被用来清除 inline 元素间隙，但会破坏vertical-align基准） - 用 WebStorm 的「Elements」面板（调试时右键 → 「Debug’ xxx.html’」）实时修改样式，比反复改代码快得多
用 Flex 布局对齐图片时，align-items 不生效？检查父容器是否设了 display: flex
这是 WebStorm 调试中最常漏掉的一环：HTML 文件里写了 class="container"，CSS 里也写了 .container { align-items: center; }，但没写 display: flex。Flex 属性全都不起作用，浏览器也不会报错，只是静静失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 WebStorm 的「CSS Preview」或 Elements 面板里，直接看父元素 computed 样式中有没有
display: flex；没有就补上 -
align-items控制交叉轴（通常是垂直方向），justify-content控制主轴（通常是水平方向）——别反着用 - 如果图片被包裹在
a或span里，而这些标签默认不是块级，记得给它们加display: block或设为 flex 子项
WebStorm 启动 HTML 时图片路径 404，重点看 src 是相对路径还是根路径
在 WebStorm 里点「Open in Browser」或用内置服务器运行 HTML，图片加载失败，控制台报 404，大概率是路径解析错了。WebStorm 默认以项目根目录为服务器根路径，不是以 HTML 文件所在目录为基准。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
src="./images/logo.png"是相对当前 HTML 文件位置；用src="/images/logo.png"是相对于项目根目录（即 WebStorm 启动服务时的 root） - 打开 WebStorm 的「Services」工具窗口 → 查看内置服务器地址（通常是
http://localhost:63342/your-project/...），确认/images/是否真在该 URL 下可访问 - 避免用
file:///方式双击打开 HTML，这时src的相对路径行为和 HTTP 服务不一致，调试结果不可靠
调试时图片忽高忽低，可能是 box-sizing 或 max-width 没统一
尤其在响应式布局里，同一张图片在不同屏幕宽度下对齐错乱，不是 CSS 写错了，而是 img 的盒模型行为被其他规则覆盖了。比如某个框架重置了 box-sizing: border-box，但图片默认是 content-box，加上 padding 或 border 就会撑开高度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给所有
img加统一重置：img { box-sizing: content-box; max-width: 100%; height: auto; } - 如果用了
object-fit，注意它只对block或flex容器里的图片生效，inline图片需额外处理 - WebStorm 的「Color Picker」和「Layout Viewer」能直观看到 padding/margin/border 占位，比肉眼判断准得多
对齐问题真正麻烦的从来不是怎么写，而是哪一层样式悄悄覆盖了你写的那行 vertical-align —— 所以别急着改，先在 Elements 面板里把 computed styles 展开三层以上，盯住「used values」那一栏。
