Astro 中图片右对齐需用 CSS（如 float: right 或 margin-left: auto）而非 HTML align 属性；推荐 class + 作用域样式，注意 :global() 或全局 CSS 以确保生效，<Image> 组件不自动添加布局样式。

Astro 中图片默认不支持 align 属性，得用 CSS 控制

HTML 的 <img align="right"> 在 Astro 组件里直接写会失效——Astro 编译后不会保留这个属性，浏览器也早已废弃 align。真正起作用的是 CSS 的 float、display 或现代布局（如 flex / grid）。

• align 是 HTML4 旧属性，Astro 不透传，且现代 CSS 规范已移除对它的支持
• 用 class 或内联 style 才可靠，比如 style="float: right; margin-left: 1rem;"
• 若用 <Image>（来自 @astrojs/image），它只输出 <img> 标签，不自动加对齐样式，必须手动控制

Astro 组件里怎么给图片加右对齐（或左/居中）

推荐在组件中用 class + CSS 模块或全局样式，避免内联样式污染逻辑。Astro 支持 <style> 块作用域，但注意：CSS 作用域默认不穿透到子元素（如 <img>），所以得显式写选择器。

• 写法示例（推荐）：

  <img src="/avatar.jpg" class="align-right" width="80" height="80">
  <style>
  .align-right {
    float: right;
    margin-left: 1rem;
  }
  </style>

• 如果要文字环绕图片，float 仍是最直接方案；纯右对齐不环绕，用 margin-left: auto; display: block; 更干净
• 用 text-align: center 对父容器生效，但对 <img> 本身无效（除非设为 display: inline-block）

用 @astrojs/image 时图片对齐失效的常见原因

<Image> 组件输出的是带 srcset 和 sizes 的响应式 <img>，但它不会帮你加任何布局样式。很多人以为加了 class 就完事，结果发现没反应——其实是 CSS 优先级或选择器没命中。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 检查是否用了 CSS 作用域（<style> 默认 scoped），此时需用 :global(.my-class) 或把样式提到 src/styles/ 下
• <Image> 的 class 属性会透传到最终 <img>，但若你写了 <Image class="align-right"> 却没定义对应 CSS，当然没效果
• 某些 Astro 模板（如 MDX）里，Markdown 解析器可能提前处理 ![]() 语法，绕过你的组件控制，这时得改用原生 <img> 或自定义 MDX 插件

文字环绕图片时，记得清浮动或用现代替代方案

用 float 实现图文环绕很直接，但后续内容容易塌陷。Astro 页面常是静态生成，没有 JS 自动清理，得手动处理。

立即学习“前端免费学习笔记（深入）”；

• 最简补救：

  <div style="clear: both;"></div>

  放在浮动图片之后
• 更稳妥：用 display: flow-root 包裹图文区域（兼容性好，Chrome 58+/Firefox 57+ 都支持）
• 想彻底告别 float？用 display: grid 定义两栏，图片放 grid-column: 1，文字放 grid-column: 2，但语义和可访问性需额外考虑

实际写的时候，多数人卡在“加了 class 没反应”——八成是 CSS 作用域或选择器没写对，而不是 Astro 或图片本身的问题。