HTML图片怎么用UnoCSS对齐_UnoCSS原子化CSS图片对齐实战
UnoCSS 的 text-align 类对图片无效因其仅作用于父容器内的行内内容需加在父块级容器上图片居中应优先用 block mx-autoFlex 仅适用于需水平垂直居中的场景。UnoCSS 的 text-align 类对图片无效先搞清作用对象图片默认是行内元素img但 text-align 只对**父容器内的行内内容**起作用不是直接控制图片自身。所以给 img 加 text-center 没反应真正要加的是它的**父块级容器**比如 div 或 p。常见错误现象img srca.jpg classtext-center —— 完全没效果因为 img 自身不响应 text-align。正确写法div classtext-centerimg srca.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 srca.jpg classmx-auto —— 图片仍是行内margin 对行内元素左右无效结果还是左对齐。立即学习“前端免费学习笔记深入” Cleanup.pictures 智能移除图片中的物体、文本、污迹、人物或任何不想要的东西