HTML图片在Education Zone中不居中，根本原因是父容器未设置text-align: center或img未设为block元素；需检查父级div类名并添加对应CSS，或使用display: block与margin: 0 auto组合，避免滥用flex导致布局错乱。
HTML图片在Education Zone里不居中？检查 img 的父容器是否用了 text-align: center
Education Zone 主题（尤其基于 WordPress 的 Education 主题）默认把课程图放在 .course-thumbnail 或类似容器里，而它往往继承自全局段落样式——这意味着图片默认左对齐。不是图片本身问题，是父级没给居中指令。
实操建议：
- 打开浏览器开发者工具（右键 → 检查），定位到课程图的
img标签，往上找到最近的包裹div（比如.course-item或.eduzon-course-card） - 在主题自定义 CSS（Appearance → Customize → Additional CSS）里加一句：
div.course-item, .eduzon-course-card { text-align: center; } - 如果只影响某类页面（如课程列表页），可加 body class 限定：
body.post-type-archive-course div.course-item { text-align: center; }
用 margin: auto 居中但没反应？确认 img 是块级元素
margin: auto 对行内元素（img 默认就是）无效。很多人直接写 img { margin: 0 auto; display: block; } 却忘了 display: block 这一步，结果白调。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 加了
margin: 0 auto但图片纹丝不动 - 图片右边多出空白，疑似“右偏”（其实是行内换行符或空格被渲染成间隙）
正确写法（推荐加在主题 CSS 中）：
img.course-thumbnail {
display: block;
margin: 0 auto;
}
注意：别用 !important 盲加，先查是否被更高优先级规则覆盖（比如主题自带的 .course-thumbnail img { display: inline; }）。
WordPress 后台上传后缩略图错位？检查 the_post_thumbnail() 的尺寸参数和 CSS 冲突
Education Zone 常用 the_post_thumbnail('course-thumb') 输出课程图，这个尺寸别名可能对应固定宽高（如 300×200）。如果 CSS 强制设了 width: 100% 又没配 height: auto，就会拉伸变形、破坏居中基准。
使用场景与参数差异：
-
the_post_thumbnail('medium')→ 用 WordPress 默认 medium 尺寸（300px 宽），较可控 -
the_post_thumbnail('full')→ 原图输出，需靠 CSS 约束，风险高 - 若主题注册了
'course-thumb'，去functions.php查add_image_size()实际尺寸
性能提示：用错尺寸别名会导致大图被前端缩放，拖慢首屏加载——居中只是表象，根源可能是资源浪费。
Flexbox 居中后文字错位？避免在 .course-item 上滥用 display: flex
有人为居中图片直接给父容器加 display: flex; justify-content: center;，结果发现课程标题、描述全挤到一行或垂直偏移——因为 flex 会让所有子元素变成 flex item，破坏原有文档流布局。
容易踩的坑：
- 只对图片容器 flex，而不是整个
.course-item（例如单独包一层<div class="thumb-wrapper"><img alt="HTML图片怎么在Education Zone对齐课程图_Education教育主题设置" ></div>） - 没设
flex-direction: column就想让图文垂直居中，结果标题被横向压扁 - 旧版 IE 不支持 flex，Education Zone 若需兼容 IE11，此方案慎用
更稳妥的替代：
.thumb-wrapper {
display: flex;
justify-content: center;
}
.thumb-wrapper img {
max-width: 100%;
height: auto;
}
真正卡住人的，往往是父容器的 display 类型和 inherited text-align 被多层 CSS 覆盖，而不是图片本身。调的时候先关掉所有自定义 CSS，一层层开，比硬猜快得多。
