HTML图片在TechDesk主题中不居中，因主题禁用align属性而依赖CSS类；须用class="aligncenter"或display:block+margin:0 auto，并注意父容器text-align覆盖、wp-block-image类冲突及响应式断点问题。
HTML图片在TechDesk主题里不居中？检查align属性是否被忽略
TechDesk这类基于WordPress的IT主题通常禁用传统align属性（如align="center"），因为它们依赖CSS类控制布局，硬写align会被主题样式覆盖或直接丢弃。
常见错误现象：<img src="xxx.jpg" align="center">在编辑器里看着居中，发布后靠左；或者Chrome开发者工具里看到align属性存在，但计算样式中text-align或margin没生效。
- 真正起作用的是主题预设的CSS类，比如
wp-image-123、aligncenter、size-full - 在WordPress经典编辑器或Gutenberg中插入图片时，务必通过界面按钮选“居中对齐”，而不是手动加
align属性 - 如果手写HTML，必须用
class="aligncenter"（不是align="center"）——TechDesk识别这个类并注入对应CSS规则
TechDesk图片对齐失效，大概率是父容器text-align被重置
即使加了class="aligncenter"，图片仍靠左，往往是因为图片所在段落（<p>）或区块（<div class="entry-content">）的text-align被设为left且优先级更高。
使用场景：在自定义HTML区块或短代码中嵌入图片，或从其他平台复制带内联样式的HTML进来。
立即学习“前端免费学习笔记（深入）”；
- 打开浏览器开发者工具，选中图片 → 查看Computed标签页，确认
text-align最终值是不是left - 临时修复：给图片外层
<p>加style="text-align:center;"，但更稳妥是统一在主题自定义CSS里补一句：.entry-content p { text-align: inherit; } - 注意：TechDesk默认对
.entry-content img设了display: inline-block，所以text-align才管用；如果某处把图片设成display: block，就得改用margin: 0 auto
用margin: 0 auto强制居中？先看图片是否为block级
想彻底绕过text-align机制，直接用margin: 0 auto，但前提是图片得是块级元素。TechDesk默认给img设的是inline，所以直接加style="margin:0 auto;"无效。
性能/兼容性影响：此法不依赖父容器text-align，适合复杂嵌套场景，但多一层内联样式，略增维护成本。
- 正确写法：
<img src="techdesk-logo.png" style="display:block; margin:0 auto;"> - 如果图片有链接包裹（
<a href="..."><img ...></a>），需同时给<a>加display:block，否则margin还是不起作用 - Gutenberg编辑器里，可选中图片 → 右侧设置面板 → 布局 → 宽度设为“全部宽度”再设对齐，它会自动输出
display:block+margin组合
TechDesk主题升级后图片错位，检查wp-block-image类是否冲突
新版TechDesk（尤其适配Gutenberg后）会为图片区块自动添加wp-block-image类，并附带自己的居中逻辑。如果你之前用自定义类（如my-center-img）硬覆盖，升级后可能被新CSS权重压制。
常见错误现象：老文章图片突然左偏，新文章正常；或者只有某些页面出问题（比如知识库分类页用了不同模板）。
- 检查源码里图片是否同时存在
aligncenter和wp-block-image—— 两者共存时，后者CSS规则可能覆盖前者 - 临时验证：在Customizer → 额外CSS里加一句
.wp-block-image.aligncenter { display: block; margin: 0 auto; } - 长期建议：放弃自定义类，统一用Gutenberg原生对齐功能，避免主题更新带来样式断裂
最麻烦的其实是图片在响应式断点下对齐失效——比如桌面端居中，手机端又变左对齐。这通常是因为max-width或flex容器干扰了margin: 0 auto，得单独查@media规则里有没有漏掉text-align:center或justify-content:center。
