There are two ways to center an image:
Option 1: Add “Margin:0 Auto” - this will add an equal dynamic margin on both left and right sides of the element so that it’s centered in a container. Only Display:Block elements can be centered this way, so set Display to Block. We do this automatically when you press the “Margin:0 auto” button.
Option 2: By default images are “Inline-block” elements. That means if you select a Div Block (or any other container) and set a text-align to be Center, all the inline and inline-block elements inside will be centered. (Block elements don’t center though because the are 100% width of the container by default).
Small CSS lesson: Block elements span the whole width of the container by default where as inline-block elements only have width based on its own contents. For example two inline-block elements can stack next to each other but two block elements can only stack on top of each other. You can set how your element behaves by setting Display property.
Important note: If you are using a template and you see “ALL Images” as a class for new images you can remove this so that your images don’t inherit weird properties (we have removed this a while ago but it persisted in our templates for a while). To remove, select that class, remove all the styles and click on “Remove Unused Styles” in the Style Manager panel. Then refresh your page.