Note: a complete article on how to vertically align content in Divi Builder can be found here.
Vertically Align Content in a Multi-Column layout
In order to Vertically Align content in a Column, first we need to edit the Row settings and navigate to Design Tab > Sizing. Here, the only option we need to enable is Equalize Column Heights.
Next, we need to go to Row Settings > Content > Column Settings > Advanced Tab > Custom CSS > Main Element and enter
From the above screenshot, we can see that the column that has less content (in this case column 1) will have its content vertically aligned.
Other CSS properties we can use:
align-self: flex-start;- will align the second column content at the top
align-self: flex-end;- will align the second column content at the bottom
Vertically Align Content in a Single Column Layout
In order to Vertically Align Content in a Row, we need to follow those steps:
Edit the Row Settings;
Open the Design Tab;
Go to the Spacing tab;
Use the Custom Top Padding and Custom Bottom Padding - make sure the same values are used for the top and bottom.
Note: Since Divi is a responsive theme out of the box, for a better result use percentages values (
vw ). Here is a screenshot of the expected result:
In the above example, I set the values for both top and bottom custom padding to be
The same process can be applied if we want to vertically align the content of a Section. The only difference is that, in this case, the element that needs to have the same top and bottom padding would be the Section.