VSCode中HTML图片不显示或错位是因file://协议限制，应使用Live Server插件启用HTTP服务；图片居中推荐text-align:center（单图）、flex+justify-content:center（多图）、vertical-align:middle（行内）；路径须用正斜杠且区分大小写。
VSCode 里直接打开 HTML 文件为啥图片不显示或错位
不是 vscode 的问题，是浏览器没走 http 协议加载本地文件——file:// 协议下，部分 css 布局（比如 display: flex 或 vertical-align 在某些上下文）、相对路径图片、甚至 fetch 都会受限或行为异常。你写的对齐代码本身可能没问题，但环境卡住了。
实操建议：
- 别双击 HTML 文件，也别用 VSCode 右键“Open with Live Server”以外的方式预览
- 确保已安装官方插件
Live Server（作者：Ritwick Dey） - 右键 HTML 文件 →
Open with Live Server，它会起一个http://127.0.0.1:5500/xxx.html服务，这时 CSS 对齐、图片路径、JS 加载才真正可靠 - 如果图片仍错位，检查是否用了
img标签内联样式（如style="vertical-align: middle;"），但父容器是div且未设line-height或font-size——这种组合在file://下更易出怪相，换Live Server后往往自动修复
HTML 图片水平居中对齐的三种靠谱写法（别碰 align 属性）
align 是 HTML4 废弃属性，现代浏览器虽兼容但行为不可控，尤其和 CSS 盒模型混用时极易失效。真要居中，按场景选：
- 单张图独立居中：给
img外层包一个div，设text-align: center—— 简单、兼容性好、不用 Flex - 多图并排居中（如图库）：用
display: flex+justify-content: center，但必须确保父容器有明确宽度或width: 100%，否则 Flex 容器可能塌陷 - 图片在文字行内垂直居中：优先用
vertical-align: middle，但前提是父元素是行内上下文（比如span或未设display: block的p），且避免和margin-top/bottom混用——后者会破坏行高计算
示例（安全写法）：
<div style="text-align: center"> <img src="logo.png" alt="logo"> </div>
VSCode 中图片路径写错导致 404 或空白的典型表现
常见错误现象：<img src="images/logo.png"> 在 VSCode 里编辑看着正常，但 Live Server 打开后控制台报 404 (Not Found)，或者图片区域留白、尺寸为 0。
立即学习“前端免费学习笔记（深入）”；
- 路径是相对于当前 HTML 文件位置的，不是相对于 VSCode 工作区根目录
- Windows 用户特别注意反斜杠：
src="images\logo.png"是错的，必须用正斜杠src="images/logo.png" - 大小写敏感：Linux/macOS 服务器上
Logo.png≠logo.png，即使你在 Windows 上开发，Live Server 也模拟类 Unix 行为 - 如果项目结构是
/src/index.html和/src/images/icon.jpg，那路径就是images/icon.jpg；如果是/index.html和/assets/img/photo.jpg，路径就得写../assets/img/photo.jpg
为什么改了 CSS 对齐却没生效？检查这三处
CSS 层叠和继承经常让对齐“看起来没反应”。重点查：
- 浏览器开发者工具里，看
img元素最终计算出的vertical-align值是不是被其他规则覆盖（比如重置 CSS 里的img { vertical-align: middle; }被你后面写的img { vertical-align: top; }覆盖了） - 父容器是否设置了
overflow: hidden或height固定值，把图片“裁”掉了——这时候对齐还在，只是你看不见 - 是否误用了
float：一旦img浮动，它就脱离文档流，text-align对它完全无效，得用margin: 0 auto+display: block替代
复杂点在于：对齐效果依赖于整个渲染上下文，不是改一行 CSS 就能立竿见影。你得先确认图片真被加载出来了，再确认它的盒模型没被意外压缩或溢出，最后才调对齐。
