图片说明文字居中无法正常显示

[YazawaSunrise]

wordpress的编辑界面，将说明文字设为居中 实际显示页面，居中失败 默认主题的显示

[github-actions[bot]]

@YazawaSunrise，感谢你给 sakurairo 提出了 issue。ヾ(≧▽≦*)o 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[kanodaisuki]

你的页面排版样式选择的是什么呢，在主题设置里面

[YazawaSunrise]

你的页面排版样式选择的是什么呢，在主题设置里面

默认样式

[kanodaisuki]

问题原因在于默认主题与第三方主题（不仅仅限于Sakurairo）渲染出来的HTML结构不同，导致无法匹配区块编辑器的样式。

默认主题渲染出来的HTML

<figure class="wp-block-image aligncenter size-full">
  <img
    decoding="async"
    loading="lazy"
    width="340"
    height="342"
    src="http://sakurairo-dev.kanochan.net/wp-content/uploads/2022/04/login.png"
    alt=""
    class="wp-image-1186"
    srcset="
      https://sakurairo-dev.kanochan.net/wp-content/uploads/2022/04/login.png         340w,
      https://sakurairo-dev.kanochan.net/wp-content/uploads/2022/04/login-298x300.png 298w,
      https://sakurairo-dev.kanochan.net/wp-content/uploads/2022/04/login-150x150.png 150w
    "
    sizes="(max-width: 340px) 100vw, 340px"
  />
  <figcaption class="wp-element-caption">这是说明文字</figcaption>
</figure>

第三方主题渲染出来的HTML

<div class="wp-block-image">
  <figure class="aligncenter size-full">
    <img
      decoding="async"
      width="340"
      height="342"
      src="http://sakurairo-dev.kanochan.net/wp-content/uploads/2022/04/login.png"
      alt=""
      class="wp-image-1186"
      srcset="
        https://sakurairo-dev.kanochan.net/wp-content/uploads/2022/04/login.png         340w,
        https://sakurairo-dev.kanochan.net/wp-content/uploads/2022/04/login-298x300.png 298w,
        https://sakurairo-dev.kanochan.net/wp-content/uploads/2022/04/login-150x150.png 150w
      "
      sizes="(max-width: 340px) 100vw, 340px"
    />
    <figcaption class="wp-element-caption">这是说明文字</figcaption>
  </figure>
</div>

区块编辑器样式库

关于图片说明居中的样式可以在/wp-includes/css/dist/block-library/style.css的第1014行找到，对于WordPress6.2.2版本：

.wp-block-image.aligncenter{
  text-align:center;
}

这里文字居中样式的选择器只会匹配默认主题渲染出来的HTML，第三方主题不生效也是合情合理。

目前不清楚是WordPress有意为之或是BUG。看了一下其他主题，似乎都是在主题里集成

.wp-block-image .aligncenter{
  text-align:center;
}

样式以解决此问题。

如果想要临时解决这个问题，你可以在主题设置中，将上面的样式添加到主题的自定义CSS里面。

[kanodaisuki]

对于为什么同一个区块下，默认主题与第三方主题渲染出来的HTML结构不同，或许应该详细考究一下，走过路过的大佬们，请帮忙看看~

[KotoriK]

感谢Copilot找到了一篇2022年5月的文章，自WordPress 6.0始，区块的HTML标记结构发生了变化 我们可能要针对相关情况做特别处理

[github-actions[bot]]

这个 Issue 已经 30 天没有任何活动了，将被标记为过时 stale。删除 stale 标签或评论，否则将在 7 天内关闭。

[github-actions[bot]]

此 Issue 由于被标记为过时 stale 且超过 7 天没有活动，已自动关闭。