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

admin
admin
admin
343
文章
75
评论
2022年3月23日08:00:00
评论
56

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

admin
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: