1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > WordPress古腾堡编辑器图片不居中如何解决

WordPress古腾堡编辑器图片不居中如何解决

时间:2022-08-21 01:05:50

相关推荐

WordPress古腾堡编辑器图片不居中如何解决

自由品自由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文件。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。