图片在ul/li中不居中需分场景处理：默认用li的text-align:center；若img设为display:block则改用margin:0 auto；需响应式时结合object-fit与容器宽高约束；强居中推荐flex布局；同时必须设置width/height属性防CLS。
img 在 ul/li 里不居中？先检查 display 类型
默认 <img> 是 inline 元素，而 <li> 是 block 容器，直接写 text-align: center 在 <li> 上通常能居中，但一旦图片被设了 display: block（比如加了 margin: 0 auto），text-align 就失效了。
- 如果只想要水平居中：给
<li>加text-align: center，且确保<img>没被强制设成display: block或float - 如果用了
display: block（比如为了后续加 margin 或响应式处理），那就必须配margin: 0 auto - 别漏掉
max-width: 100%和height: auto，否则缩放时可能溢出或变形
响应式图片在列表项中撑宽？用 object-fit + 容器约束
单纯 width: 100% 在不同尺寸 <li> 里容易拉伸失真。真正可控的做法是把 <img> 包进一个有明确宽高的容器，再用 object-fit 控制裁剪/缩放行为。
- 给
<li>设固定宽高（如aspect-ratio: 4/3）或最小尺寸（min-width），避免宽度塌陷 -
<img>设width: 100%; height: 100%; object-fit: cover;（或contain，按需选） - 如果要兼容旧浏览器（如 IE），
object-fit不生效，得换 background-image 方案，但会失去alt和 SEO 支持
Flex 布局让图片在 li 里真正居中（含垂直）
当列表项高度不固定、或者需要上下左右都居中时，flex 是最稳的解法，比 text-align 或 margin: auto 更可靠。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给
<li>加display: flex; justify-content: center; align-items: center; -
<img>保持默认 inline 或设display: block都行，flex 容器会自动居中其内容 - 注意：如果
<li>高度由内容撑开（没设height或min-height），垂直居中效果可能不明显——此时加min-height: 200px这类兜底值更可控 - 移动端 Safari 对
flex的align-items: center在某些嵌套下有渲染延迟，可加transform: translateZ(0)强制 GPU 加速（极少需，但真遇到抖动可试）
用 picture + srcset 实现响应式源切换，但别忘了 width 属性
仅靠 CSS 居中解决不了图片资源适配问题。真正响应式不只是“看起来居中”，还要加载合适尺寸的图。这时候 <picture> 和 srcset 得配合 HTML 属性一起用。
立即学习“前端免费学习笔记（深入）”；
-
<img>必须带width和height属性（即使 CSS 覆盖），否则浏览器无法提前计算宽高比，导致布局偏移（CLS） - 用
srcset提供多分辨率图：srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"，再配sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 别把
<picture>直接塞进<li>后就不管——它内部的<source>和<img>仍要单独处理居中逻辑，推荐在外层<li>上统一用 flex
最容易被忽略的是：图片加载前的占位高度。没有 width/height 属性或容器未设 aspect-ratio，会导致页面重排，居中效果在加载瞬间“跳一下”。这不是居中代码的问题，而是响应式图片的基本契约。
