Vertically align Divi columns

By default columns in the Divi theme, starts from the top. In this post, I will show you how to align columns vertically centered & also how to align them from the bottom.

How to align columns vertically center in Divi?

To align columns vertically center in Divi, go to the “Row Settings” as you see in the screenshot below.

Divi row settings

Now click on the “Advanced” tab.

Divi row settings - advanced tab

Click on “Custom CSS” as you see below.

Divi custom css

Now write the following two lines of CSS in the “Main Element.”

display: flex;
align-items: center;
Custom css to vertically align center in Divi

This will make all the columns vertically centered in the same row. With these two lines of CSS, my columns looks like the following:

Vertically center aligned columns in Divi

However, don’t forget to save your changes.

How to bottom align columns in Divi?

To align columns in the bottom, follow the same steps as you see above and only change one thing. Replace the “align-items: center” with “align-items: flex-end” (see the CSS below for more clarification.

display: flex;
align-items: flex-end;

With this CSS in place, my columns look like the following screenshot.

Bottom aligned columns in Divi theme

That’s it!

This is how you can align columns in different directions in your Divi theme. If you like video instructions, watch it below.

If you still have any questions, please let me know.