How to center images in the CMS formatted text field

Centering images in the CMS formatted text field on Framer is easy with a simple snippet of custom code. Please note that this solution requires a paid plan.

First, navigate to the CMS page settings. In the custom code section at the start of the <head> tag, add the following snippet:

<style>
  .framer-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
</style

This code snippet will ensure that images within the formatted text field are displayed as block elements, centered horizontally with automatic margins on the left and right. Additionally, the width of the images will be set to 50% of the containing element, which helps in maintaining a balanced and visually appealing layout.

By adding this code to the <head> section of your CMS page, all images with the class framer-image will be centered automatically. This is a quick and efficient way to improve the presentation of your CMS content on Framer.