图片不居中需分场景处理：text-align:center仅对行内元素有效；flex布局须设justify-content:center和align-items:center；object-fit需配合显式宽高；响应式需viewport+max-width:100%。
图片在HTML里不居中？先看display和text-align管不管用
cursor ai 生成的图片对齐代码常直接套用text-align: center，但这只对行内元素（比如<img>默认行为）生效，且仅在父容器是块级、有明确宽度时才可靠。如果父容器用了display: flex或grid，text-align就完全失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认
<img>是否被包裹在<p>、<div>等块级容器里；如果不是，text-align加在body或html上没用 - 检查父容器有没有意外设置
display: inline-block或float，这些会破坏text-align的上下文 - 更稳妥的做法：给图片加
display: block，再配margin: 0 auto——这是最兼容老浏览器的方式
Cursor生成flex布局后图片偏左？注意justify-content默认值
Cursor经常自动输出display: flex容器，但默认justify-content: flex-start，图片自然贴左。它不会主动加justify-content: center，除非你提示词里写了“居中”或“center”。
常见错误现象：<div style="display:flex"><img src="..."></div>渲染出来还是左对齐，以为AI出错了，其实是缺关键声明。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动补全
justify-content: center，或让Cursor重写时加上“用flex居中图片”这类明确指令 - 如果容器里还有文字或其他元素，
justify-content会影响全部子项；只想动图片，改用margin: auto更精准 - 别忘了加
align-items: center——否则垂直方向可能不对齐，尤其当图片高度和容器高度不一致时
用object-fit控制图片缩放时，width/height必须显式设置
Cursor有时会生成object-fit: cover但漏掉width和height，结果图片原尺寸撑开布局，object-fit根本不起作用——因为这个属性只在图片有“约束尺寸”时才生效。
使用场景：做响应式头图、卡片缩略图、头像裁切，都需要先框定容器大小。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<img>上至少设一个尺寸，比如width: 100%或height: 200px；纯max-width: 100%不够 - 优先把
object-fit加在<img>本身，而不是父容器；加在父容器上无效 -
object-fit: contain会留白，cover会裁剪——选哪个取决于设计需求，Cursor不会自动判断
移动端图片错位？检查viewportmeta和max-width
Cursor生成的HTML常忽略<meta name="viewport" content="width=device-width, initial-scale=1">，导致手机上图片被强制缩放、对齐失效。另外，没加max-width: 100%的图片会在窄屏溢出，拖动才能看到全貌。
性能影响：没有viewport，iOS Safari会以980px宽度渲染页面，图片按这个基准计算尺寸，实际显示严重失真。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有含图片的HTML，开头
<head>里必须有viewportmeta标签；Cursor不一定自动生成，得手动补 -
<img>样式里加max-width: 100%; height: auto——这是响应式图片的底线规则 - 如果用
flex或grid布局，还要确认父容器没设死固定宽度（比如width: 1200px），否则在手机上照样溢出
真正麻烦的不是写不对齐代码，而是对齐了但没考虑图片加载前的布局抖动、高DPI屏幕下的像素对齐、或者loading="lazy"触发时机导致的重排。这些Cursor目前基本不处理，得自己盯住。
