SolidJS 中图片对齐完全依赖 CSS，img 默认为行内元素，需设 display: block 才能用 margin: auto 居中；响应式切换应通过媒体查询实现，而非 Solid 信号直接驱动样式。
图片在 SolidJS 里用 img 标签，对齐靠 CSS，不是靠框架 API
SolidJS 本身不提供图片对齐的专用指令或组件，img标签的行为和原生 HTML 完全一致。所谓“响应式对齐”，本质是控制 img 的盒模型、父容器布局方式和断点样式——SolidJS 只负责把 src、class 这些属性正确渲染到 DOM 上。
常见错误现象：class="text-center"写在 img 上没效果，或者用 style={{textAlign: 'center'}} 但不起作用——因为 textAlign 对行内元素（如img）无效，得作用于其父块级容器。
- 对齐操作永远发生在 CSS 层，SolidJS 只做属性透传
- 别试图找
useImageAlign这类钩子，它不存在 - 响应式切换（比如小屏居左、大屏居右）靠
class绑定 + 媒体查询，不是靠 Solid 的响应式变量直接驱动样式计算
用 class 绑定实现动态对齐，别硬写style
虽然 SolidJS 支持 style 对象绑定，但图片水平对齐（left/center/right）必须用 margin: auto 或text-align配合父容器，而这两者都不适合用内联 style 精细控制，尤其涉及响应式时。
正确做法是预设好 CSS 类，再用 Solid 的响应式信号控制类名：
立即学习 “ 前端免费学习笔记（深入）”；
const [align, setAlign] = createSignal('center'); // 对应 CSS：// .align-left {display: block; margin-left: 0; margin-right: auto;} // .align-center {display: block; margin: 0 auto;} // .align-right {display: block; margin-left: auto; margin-right: 0;}- 必须给
img加display: block，否则margin: auto无效 - 用
classList而不是class绑定，避免覆盖其他基础类：classList={{'align-center': align() === 'center', 'align-right': align() === 'right'}} - 不要用
style={{margin: '0 auto'}}，Solid 会把它转成字符串，无法响应式更新值
响应式图片对齐要配@media，不能只靠 Solid 信号
屏幕尺寸变化触发的对齐切换（比如移动端左对齐、桌面端居中），不能单靠 createMediaQuery 监听然后改信号——它只在挂载时生效一次，且不处理窗口缩放。真正可靠的是纯 CSS 媒体查询。
示例场景：图片在 md 及以上宽度居中，小屏左对齐
.responsive-img {display: block;} .responsive-img.center-on-desktop {margin: 0 auto;} @media (max-width: 768px) {.responsive-img.center-on-desktop { margin-left: 0; margin-right: auto;} }- SolidJS 只需静态加
class="responsive-img center-on-desktop"，后续全由 CSS 接管 - 如果必须用 JS 响应窗口变化（比如配合滚动定位），用
onMount+window.addEventListener('resize', ……)，但 95% 的对齐需求不需要这么重 - 别在
createEffect里反复读window.innerWidth，性能差还容易漏事件
picture + srcset不影响对齐逻辑，但会改变父容器行为
用 picture 包裹 source 和img实现响应式图片加载时，对齐代码位置和目标没变，但要注意：父容器如果用了 display: flex 或grid，picture作为块级容器可能影响布局流。
常见错误：给 picture 设text-align: center，但内部 img 仍靠左——因为 picture 默认不是 inline，text-align 对其无意义。
- 对齐操作依然落在
img自身或它的直接父块级容器上 - 若用
picture，建议统一用display: block+margin: 0 auto控制img，忽略picture的样式 -
srcset里的分辨率描述符（如2x）和对齐无关，但高 DPR 图片若未设width/height，可能导致回流重绘，间接影响对齐稳定性
SolidJS 里图片对齐这件事，核心就一条：它不参与布局计算。所有“响应式”都来自 CSS 媒体查询或父容器的 Flex/Grid 行为，Solid 只管把 class 和属性写对。最容易被忽略的是 img 默认是行内元素——忘了加 display: block，后面所有margin 设置都是白忙。
