How to center images in a CMS formatted text field
Learn how to center images displayed in CMS formatted text fields using custom CSS.
If you want images inside a CMS formatted text field to appear centered, you can achieve this with a small CSS snippet. This solution requires a paid Framer plan with access to custom code.
Center images with custom CSS
Open your CMS page settings.
Locate the Custom Code section.
Add the following code at the beginning of the
<head>section.Publish your site to apply the changes.
<style> .framer-image { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style
How the CSS works
The snippet applies styling to all images using the framer-image class within your content.
Property | Purpose |
|---|---|
| Makes the image behave as a block-level element. |
| Adds automatic spacing on the left side. |
| Adds automatic spacing on the right side. |
| Sets the image width to 50% of its container. |
Together, these properties center images horizontally and create a balanced layout within the formatted text field.
Customize the image size
You can adjust the image width by changing the width value in the CSS snippet. For example:
width: 100%;displays images at the full width of the container.width: 75%;creates a larger centered image.width: 50%;provides a more compact presentation.
If you want images inside a CMS formatted text field to appear centered, you can achieve this with a small CSS snippet. This solution requires a paid Framer plan with access to custom code.
Center images with custom CSS
Open your CMS page settings.
Locate the Custom Code section.
Add the following code at the beginning of the
<head>section.Publish your site to apply the changes.
<style> .framer-image { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style
How the CSS works
The snippet applies styling to all images using the framer-image class within your content.
Property | Purpose |
|---|---|
| Makes the image behave as a block-level element. |
| Adds automatic spacing on the left side. |
| Adds automatic spacing on the right side. |
| Sets the image width to 50% of its container. |
Together, these properties center images horizontally and create a balanced layout within the formatted text field.
Customize the image size
You can adjust the image width by changing the width value in the CSS snippet. For example:
width: 100%;displays images at the full width of the container.width: 75%;creates a larger centered image.width: 50%;provides a more compact presentation.
If you want images inside a CMS formatted text field to appear centered, you can achieve this with a small CSS snippet. This solution requires a paid Framer plan with access to custom code.
Center images with custom CSS
Open your CMS page settings.
Locate the Custom Code section.
Add the following code at the beginning of the
<head>section.Publish your site to apply the changes.
<style> .framer-image { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style
How the CSS works
The snippet applies styling to all images using the framer-image class within your content.
Property | Purpose |
|---|---|
| Makes the image behave as a block-level element. |
| Adds automatic spacing on the left side. |
| Adds automatic spacing on the right side. |
| Sets the image width to 50% of its container. |
Together, these properties center images horizontally and create a balanced layout within the formatted text field.
Customize the image size
You can adjust the image width by changing the width value in the CSS snippet. For example:
width: 100%;displays images at the full width of the container.width: 75%;creates a larger centered image.width: 50%;provides a more compact presentation.
FAQ
Will this affect all images in my CMS formatted text fields?
Yes. The CSS targets all images using the
framer-imageclass, so every matching image will be centered automatically.Do I need a paid Framer plan to use this solution?
Yes. Access to custom code requires a paid Framer plan.
Why aren’t my images centering after adding the code?
Make sure the CSS is added to the correct page or site settings, publish your site after making changes, and verify that the images use the
framer-imageclass.
Updated