How to center images in the CMS formatted text field

Centering images in the CMS formatted text field is easy with a snippet of custom CSS. Note that this solution requires a paid Framer plan.

Steps to center images

  1. Navigate to the CMS page settings.

  2. 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

How the code works

  • display: block;: Ensures the image is treated as a block element.

  • margin-left: auto; and margin-right: auto;: Centers the image horizontally by setting equal automatic margins.

  • width: 50%;: Adjusts the image width to 50% of the containing element for a balanced layout.

After adding this snippet, all images with the class framer-image in the CMS formatted text field will automatically center. This quick solution enhances the presentation of your CMS content, ensuring a clean and visually appealing layout.

Still experiencing the issue after following the steps above? Create a support ticket in the Community.