codepen不支持直接上传图片，需用图床或github raw链接；vertical-align对齐基于基线而非视觉中心；水平居中需设display:block或flex布局。
CodePen 本身不支持直接上传并托管图片文件，所以你在 <img src="xxx"> 中填相对路径（比如 "./logo.png"）会 404——这是最常卡住新手的第一步。
为什么 CodePen 里 <img> 标签总不显示图片
CodePen 的编辑器只运行 HTML/CSS/JS 代码，所有外部资源必须通过可公开访问的 URL 加载。本地文件、相对路径、file:// 协议全都不行。
- ✅ 正确做法：把图片上传到图床（如 ImgBB、Postimages、Cloudinary），或用 GitHub raw 链接（需是
.png/.jpg等直出链接，不能是 GitHub 页面 URL） - ❌ 错误示例：
<img src="images/photo.jpg">、<img src="C:/my/photo.png">、<img src="https://github.com/user/repo/blob/main/photo.png?x-oss-process=image/resize,p_40">（这是 HTML 页面，不是图片） - ⚠️ 注意 GitHub raw 链接格式：点进文件 → 点「Raw」→ 地址栏应类似
https://raw.githubusercontent.com/user/repo/main/photo.png
用 vertical-align 对齐图片时常见错觉
很多人以为给 <img> 加 vertical-align: middle 就能和文字居中对齐，结果发现还是偏下——这是因为 vertical-align 作用的是**行内上下文中的基线对齐**，不是容器居中。
- 默认情况下，
<img>是inline元素，会和文字共享一行，对齐参考的是文字的 baseline（字母 x 的底边），不是盒子中心 -
vertical-align: middle是让图片中点对齐“父元素 font-size 的 0.5ex + 0.5em”，不是视觉居中，尤其在字号变化时容易漂移 - 更可靠的方式：把图片设为
display: inline-block或display: flex容器子项，再用align-items: center
CodePen 上快速测试图片水平居中的三种写法
别反复改 margin: auto 发现没用——那是因为图片默认是 inline，margin 对 inline 元素左右无效。
- ✅ 块级居中：
<img src="URL" style="max-width:90%"> - ✅ Flex 居中（推荐）：
<div style="display: flex; justify-content: center;"><img src="URL"></div> - ✅ 文字居中兼容方案：
<div style="text-align: center;"><img src="URL" style="max-width:90%"></div>
真正麻烦的不是怎么写对齐，而是每次换图都要重新找图床、验证链接是否失效、检查 MIME 类型是否被拦截——建议在 CodePen 的 Settings → CSS/JS 里提前存好几个常用图床链接，测试阶段直接粘贴复用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
