HTML图片怎么用UnoCSS对齐_UnoCSS原子化CSS图片对齐实战

UnoCSS 的 text-align 类对图片无效，因其仅作用于父容器内的行内内容，需加在父块级容器上；图片居中应优先用 block mx-auto，Flex 仅适用于需水平垂直居中的场景。UnoCSS 的 text-align 类对图片无效？先搞清作用对象图片默认是行内元素（<img>），但 text-align 只对**父容器内的行内内容**起作用，不是直接控制图片自身。所以给 <img> 加 text-center 没反应，真正要加的是它的**父块级容器**（比如 <div> 或 <p>）。常见错误现象：<img src="a.jpg" class="text-center"> —— 完全没效果，因为 <img> 自身不响应 text-align。正确写法：<div class="text-center"><img src="a.jpg"></div>若图片已设为块级（如加了 block），再用 text-center 就更没意义——此时应改用 mx-auto注意：UnoCSS 默认启用 text 预设，text-left/text-center/text-right 都可用，无需额外配置mx-auto 才是图片居中的主力，但有前提条件当图片设为块级（block）后，margin: 0 auto 才能生效，UnoCSS 提供的 mx-auto 就是为此设计的。但它不会自动帮你把图片变块级——这步必须显式声明。典型失效场景：<img src="a.jpg" class="mx-auto"> —— 图片仍是行内，margin 对行内元素左右无效，结果还是左对齐。立即学习“前端免费学习笔记（深入）”； Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西