How to vertically center your content within a Container element or Image Element

Sometimes you need to vertically align an image in a column, the best way to do this is to make use of the Vertically Center Content option that is available on the Container Element and the Image Element, this is named "layered element vertical alignment" for the image element.

Note: for content rendered inside a column element, you'll want the article How to automatically align content in columns instead.

The best way to vertically align your content is to create a container with a minimum height that is greater than the element you will be adding to the box.

Once you have added this, you can select to vertically align this content in the top, middle, or bottom of the element.

Then simply drag your element into this container background, and you'll see a vertically centered element.

In the image below you will see the vertically centered content on the left, and content this is not vertically centered in the same size container on the right.

Did this answer your question?