自由品自由WordPress用古腾堡编辑器代替经典编辑器后,我发现插入的文章图片再也不能在中间了。即使在古腾堡编辑器中设置图片,也没有用,所以我研究得很好。
传统编辑器img则是直接在p在标签中,传统编辑器中的代码如下:
<p><img src="/uploads//37.jpg"></p>
此代码前端显示图片正常居中,查看css样式发现,上述代码img有定义一个css类aligncenter,自然图片可以居中。
.aligncenter margin: 0 auto;}
在古腾堡编辑器中,产品通过块插入图片。插入图片后,图片img一个标签div下面的figure里面的
在古腾堡编辑器中间设置图片后,图片块的代码如下:
<div><figure><img src="/uploads//38.jpg"/></figure></div>
原因是古腾堡编辑器插入的图片也定义了一个class类aligncenter但这一类是定义的figure标签不是定义的img,所以img图片自然不能居中。
解决方案如下:
因为知更鸟主题后台可以自定义css在主题选项定制风格中添加以下样式css代码即可:
.single-content img{margin: 0 auto;}
如果是其他主题,请自行添加主题css文件。