自从品自行由WordPress的经典编辑器换成了古腾堡编辑器以后，就发现插入的文章图片再也无法居中了，就算在古腾堡编辑器中设置图片居中也无济于事，所以好好的研究了一番。
传统编辑器的img则是直接在p标签里面，传统编辑器里面的代码如下：
<p><img alt="Xshell如何远程登录Linux服务器" class="aligncenter wp-image-390 size-full" src="https://www.pinzixing.com/wp-content/uploads/2021/01/1545_1.jpg" width="675" height="399">
</p>这段代码前端显示图片是正常居中的，查看css样式发现，上面代码的img有定义一个css类aligncenter，自然图片可以居中。
.aligncenter {
margin: 0 auto;
}在古腾堡编辑器里面品自行是通过区块来插入图片的，图片插入进去以后，图片img标签是在一个div下面的figure里面的
古腾堡编辑器设置图片居中以后，图片区块的代码如下：
<div class="wp-block-image is-style-default">
<figure class="aligncenter">
<img src="https://www.pinzixing.com/wp-content/uploads/2021/01/1630_5.jpg" alt="Xshell远程登录Hostwdins VPS Linux服务器" class="wp-image-394"/>
</figure>
</div>原因在于：古腾堡编辑器插入的图片虽然也有定义一个class类aligncenter居中，但这个类是定义在figure标签里面的，并非是定义img，所以img图片自然就不能居中。
解决办法如下：
由于知更鸟主题后台可以自定义css样式，在主题选项》定制风格》自定义样式 下面添加如下css代码即可：
.single-content img{margin: 0 auto;}如果是其他主题，请自行添加到主题css文件。
评论