Achieving a balanced and visually appealing design often requires precise control over the alignment of your content. In Divi, vertically aligning content within columns or sections can enhance your website's overall aesthetic and readability.
This article will provide you with detailed, step-by-step instructions on how to align content in Divi vertically.
Whether you want to center text, images, or any other type of content, our guide will help you utilize Divi's built-in options and custom CSS to achieve the perfect vertical alignment, ensuring your website looks professional and well-organized.
Note: You can also check our blog article How to Vertically Align Content in Divi for a more in-depth solution.
Vertically Align Content in a Multi-Column Layout
Open the Row settings for which you want to vertical-align the content
Go to Design Tab → Sizing
Enable the Equalize Columns Heights option
Go to Row's Content Tab and click on the Gear icon for any of the columns
Go to Advanced Tab → Custom CSS → Module Elements → Main Element
Add this CSS line
align-self: center;
Other CSS rules 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
To Vertically Align Content in a Row, we need to follow these steps:
Edit the Row Settings;
Open the Design Tab → Spacing
Use the Custom Top Padding and Custom Bottom Padding, making 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 (% , vh , vw ). Here is a screenshot of the expected result:
In the above example, we have set the values for both top and bottom custom padding to be 25%.
The same process can be applied if we want to align the content of a Section vertically. The only difference is that, in this case, the element needing the same top and bottom padding would be the Section.