如何在CMS富文本字段中居中图片

如何在CMS富文本字段中居中图片

在CMS格式化文本字段中居中显示图片,只需使用一段自定义CSS即可轻松实现。请注意,此解决方案需要付费的Framer套餐。

居中图片的步骤

  1. 导航到CMS 页面设置

  2. <head> 标签开头的自定义代码部分,添加以下代码片段:

代码工作原理

  • display: block;:确保图片作为块级元素处理。

  • margin-left: auto;margin-right: auto;:通过设置相等的自动外边距实现图片水平居中。

  • width: 50%;:将图片宽度调整为容器元素的 50%,以获得更平衡的布局效果。

添加此代码片段后,CMS 格式化文本字段中所有带有 framer-image 类的图片将自动居中。该方法可快速提升 CMS 内容的展示效果,确保页面布局整洁且具有视觉吸引力。

如果仍遇到问题,请通过我们的 联系页面 与我们联系以获取进一步帮助。

Create a free website with Framer, the website builder loved by startups, designers and agencies.