Colab 的 display(HTML(...)) 不支持 align 属性，需用内联 style 实现布局：居中用 display: block; margin: 0 auto 或 text-align: center；左右对齐+文字环绕需结合 float 与 overflow: hidden；多图并排推荐 display: flex 配合 gap 和 justify-content；本地图片须 base64 编码嵌入，外部链接需 HTTPS 且支持 CORS。
Colab 里 display(HTML(...)) 不支持 align 属性
Google Colab 的 display(HTML(...)) 底层用的是 IPython 的 HTML 渲染器，它不解析传统 HTML 中的 align（如 <img align="right">），直接忽略。这不是你写错了，是 Colab 根本不认这个属性。
常见错误现象：图片没按预期靠右/居中，甚至整段 HTML 不渲染（尤其混用 align 和 style 时）。
- 别用
<img align="center">—— 它在 Colab 里无效 - 别指望
float单独生效 —— Colab 渲染容器默认不触发 BFC，浮动元素可能溢出或塌陷 - 用
display: block; margin: 0 auto;实现水平居中最稳 - 需要左/右对齐 + 文字环绕？得用
flex或grid包一层容器，不能只调<img>
用 style 写内联 CSS 才真正可控
Colab 支持完整的内联 style，但必须写完整、带单位、避免缩写歧义。比如 margin: auto 在块级元素上才居中，<img> 默认是行内元素，得先 display: block。
典型可用写法：
立即学习“前端免费学习笔记（深入）”；
from IPython.display import display, HTML
display(HTML('''
<div style="text-align: center;">
<img src="https://via.placeholder.com/200"
style="display: block; margin: 0 auto; width: 200px;">
</div>
'''))
-
text-align: center对父<div>生效，适合居中行内元素（如文字+图混排） -
display: block; margin: 0 auto对图片自身生效，强制块级+水平居中，更可靠 - 避免用
width: 50%而不设max-width—— Colab 输出区域宽度有限，可能撑破容器 - 如果图要右对齐且文字环绕，用
float: right; margin-left: 10px;，但必须确保父容器有足够高度（加overflow: hidden防塌陷）
多图并排用 flex，别用 <table> 或空格硬塞
想让两张图横排？用 <table> 不仅冗余，还容易在 Colab 里错位；用多个 <img> 加空格，会因换行符被转成空白符导致间隙不可控。
正确做法：用 display: flex 容器控制对齐和间距。
display(HTML('''
<div style="display: flex; gap: 12px; justify-content: center;">
<img src="https://via.placeholder.com/150" style="width: 150px;">
<img src="https://via.placeholder.com/150" style="width: 150px;">
</div>
'''))
-
gap比手动加margin更干净，不会影响首尾外边距 -
justify-content: space-between可让图贴左右边缘，中间等距 - Colab 对
flex支持良好，但别嵌套太深 —— 超过两层容器可能触发渲染截断 - 如果图尺寸不一，加
align-items: flex-start避免底部参差
输出后图片不显示？先查 src 路径和跨域限制
Colab 本地路径（如 ./fig.png）在 HTML() 里直接失效，因为浏览器无法读取运行时文件系统；用 files.upload() 传的图也没有 HTTP 地址，不能直接当 src。
- 本地文件必须先用
from google.colab import files上传，再用base64编码嵌入：src="data:image/png;base64,<...>" - 用
from IPython.display import Image更简单，但它不支持 HTML 布局 —— 二者选一个：要布局就用HTML+base64，要方便就用Image - 外部链接（如 GitHub raw 链接）必须是 HTTPS，且目标服务器开了 CORS（否则控制台报
Blocked by CORS policy） - 调试技巧：把生成的 HTML 字符串 print 出来，粘到浏览器开发者工具里预览，能快速定位是路径问题还是样式问题
真正的难点不在怎么写 CSS，而在于 Colab 的 HTML 渲染是沙盒化的 —— 它不完全等同于浏览器，也不等同于 Jupyter Notebook 本地环境。每次改完记得清空输出重新运行，缓存会让旧样式“看起来”还活着。
