HTML图片对齐不应使用已废弃的align属性，而应采用CSS方案：float实现文字环绕、flex/grid构建卡片布局，并注意Glitch中资源路径、HTTPS混合内容及文件名编码问题。
HTML图片对齐用 align 属性？别用了，它早被废弃了
浏览器确实还能解析 align="left" 这类写法，但 html5 完全移除了这个属性。w3c 明确标记为“obsolete”，chrome、firefox 新版本虽暂未报错，但 glitch 预览时可能触发渲染不一致——尤其在嵌套 <figure> 或配合 css grid 时，align 会直接被忽略。
- 替代方案只有 CSS：
float（简单左/右贴边）、text-align（仅对 inline 元素有效）、或更现代的display: flex/display: grid - Glitch 项目里如果保留
align，分享链接给别人看时，对方用 Safari 或旧 Edge 可能发现图片突然居中或错位 - 检查方法：打开 Glitch 编辑器的「Console」面板，刷新页面，没报错≠安全；用「Elements」面板点开
<img>标签，看 computed styles 里有没有生效的对齐规则
在 Glitch 上让图片居右并文字环绕，用 float 最快
这是最接近传统 align="right" 行为的方案，兼容性好，Glitch 默认支持，不用额外引入 CSS 文件。
- HTML 写法：
<p>这里是文字内容，<img src="cat.jpg" style="float: right; margin-left: 12px;" width="150">后面跟着更多文字……</p>
-
margin-left是必须加的，否则文字紧贴图片边缘，阅读体验差 - 注意
float会脱离文档流，如果后面紧跟<div>且没清除浮动，可能塌陷——在 Glitch 里加一句style="clear: both;"就行 - Glitch 的实时预览对
float渲染很稳定，比用 Flex 做文字环绕更少出 bug
想用 Flex 布局精确控制图片位置？得包一层 <div>
Flex 不支持直接让文字环绕图片，但它适合做「图片+说明文字」的卡片式布局，比如 Glitch 项目首页的 demo 区域。
- 结构必须是：
<div style="display: flex; align-items: center; gap: 16px;"> <img src="icon.png" width="48"> <p>这是描述文字</p> </div>
- 不能把
<p>和<img>并列放在同一级又指望 Flex 管理换行环绕——Flex 是一维布局，不是文本流 - 在 Glitch 中，如果用
flex-direction: column，记得设align-self: flex-start控制图片水平位置，否则默认居中会破坏排版预期
Glitch 分享链接后图片不显示？先查这三处
这不是对齐问题，但常被误认为样式失效——实际是资源路径或权限导致的“假对齐失败”。
- 图片路径写成
./images/photo.jpg：Glitch 不支持相对路径引用 assets，必须用完整 URL 或/assets/photo.jpg（上传到 Assets 标签页后自动生成） - 用了外部图床但链接是
http://开头：Glitch 预览页是https://，混合内容会被浏览器拦截，图片变空白方块，控制台报Mixed Content错误 - 图片文件名含空格或中文：Glitch 上传后会自动编码，但手写 HTML 时如果还写
my photo.jpg，实际 URL 已变成my%20photo.jpg，必须同步更新src
对齐本身不难，难的是分清哪些是样式问题、哪些是资源加载失败。Glitch 的 Assets 系统和 HTTPS 环境组合起来，最容易让人在调 float 和 margin 时绕半天弯路。
立即学习“前端免费学习笔记（深入）”；
