Vertically Align Content in Divi Theme Module How?
In Divi theme module rows can be Vertically Align Content at center. Also can set them vertically top or bottom. Most of the developer needs the content vertically centered. It can be done by adding padding top and bottom equally but it may cause ugly look in a smaller device layout.
You can easily add small custom CSS code to the Divi theme and achieve the goal for the content aligned vertically centered. The Divi also has a handy premade layout can be use one of them and then customize it.
Open the row setting and select the Design tab. Under this Design tab enable/toggle Sizing options and enable the “Equalize Column Heights.”
Now the process is almost done. Add the below custom CSS code to the Additional CSS. While you logged in WordPress admin dashboard click on the Appearance > Customize > Additional CSS.
.et_pb_equal_columns .et_pb_column {
margin: auto;
}
It will activate the whole site globally. When activate the row setting to “Equalize Column Heights”then that row content will magically be vertically aligned at center.
It is obvious that row content vertically aligned at bottom can be obtained instead of vertically aligned center. Then just replaced the additional CSS with the below one:
.et_pb_equal_columns .et_pb_column {
margin: auto auto 0;
}
Please see below image for better understanding of Vertically Align Content at center in Divi theme.
Is it possible to do it for only a particular row in any page?
Yes it is possible too. This way is good but it needs to do the same process again and again for different sections row and page. It is easy and as simple as you do not think it is. Just do the first step as described above. That is enabling the “Equalize Column Heights.” Now go to the “Row Setting” then click the second column (Text column). Go to the Advanced Tab. Find the “Main Element” and add the below CSS code there:
margin:auto;
It is done perfectly. This particular row content only will be vertically aligned at centered.
Following this trick, particular row content can be vertically aligned at the bottom by adding the below CSS code to the Main Element. The other steps remain the same.
margin: auto auto 0;
You may also like to read Add text beside the price woo-commerce plugin.