Streaming live at 10am (PST)

Centering Images and Elements

This is a repost of Sergie’s reply to: Centering an image in a column:

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.

1 Like

I can’t get this to work for some reason with ROW (of 3 columns) inside a CONTAINER.
I have the row to display as a BLOCK and the 0 AUTO margins for it, but it makes no difference.

The only way I can centre the row is if I display it as INLINE-BLOCK and then inside the container I give it CENTER-ALIGNED on the text options…

What am I missing?