WordPress 调整文章内图片居中显示样式的正确姿势（兼容经典编辑器 + Gutenberg）

当然可以，下面是一篇带 SEO 标题、关键词、描述的 WordPress 技术分享日志范文，你可以直接复制粘贴发布：

分享一段实用 CSS 代码，解决 WordPress 中文章图片无法居中显示的问题，兼容经典编辑器和 Gutenberg 编辑器，覆盖主题样式导致的 float、inline-block 失效情况。

正文内容：

在使用 WordPress 作为内容管理系统时，常见一个令人头疼的问题——文章中的图片明明设置了“居中”，却在前端页面中依旧靠左显示。

究其原因，绝大多数是因为主题自带 CSS 样式中，对 <img> 或 .wp-block-image 等元素做了额外的 float 或 display:inline 等设置，导致居中失效。

下面分享一段覆盖性强、兼容 WordPress “经典编辑器” + Gutenberg 编辑器” 的 CSS 代码，实际项目测试有效，可以放心使用。

/* 文章内容区域设置 */
@media only screen and (min-width: 992px) {

  /* 让文章里的所有图片居中显示（经典编辑器结构）*/
  .entry-content img,
  .post-content img,
  .wp-image-32701, /* 可省略，仅演示 */
  .alignnone,
  .wp-image {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }

  /* Gutenberg 编辑器（.wp-block-image）结构 */
  .wp-block-image,
  .wp-block-image figure,
  .wp-block-image a {
    text-align: center;
    display: block;
    width: 100%;
  }

  /* 文章内容外边距优化 */
  .single-post #container #content,
  .single-post .padder {
    position: relative;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 25px;
    padding-right: 25px;
  }

  /* 修复评论提交按钮点击区域 */
  #commentform input[type="submit"] {
    z-index: 10;
    position: relative;
  }
}

✅ 使用方法：

1. WordPress 后台 → 外观 → 自定义 → 额外 CSS

2. 将上面代码粘贴进去，保存

3. 刷新前台页面检查效果（建议 Ctrl+F5 清浏览器缓存）

🔚总结

这段代码通过 display:block + margin:auto 强制图片改为“块级元素”模式，不再受主题 float / inline 样式影响。同时也涵盖了 Gutenberg 的 .wp-block-image 结构，实现一次性解决 WordPress 图片居中问题。

如果你想进一步优化图片样式（比如加阴影、圆角、懒加载等），欢迎留言交流 🙌