I have always been a fan of Divi by Elegant Themes. The versatility of being able to customize modules using the Divi Builder is incredibly convenient. Originally I learned how to design & develop a website through the use of HTML & CSS. So transitioning to Divi with this knowledge was incredibly helpful as I know how CSS works.
Many people who use WordPress have no prior experience with CSS, so they are not aware of how they can achieve what they want, so continue reading to grab this CSS snippet. The problem is simple, you want to align your content to be vertical so it looks neater and you don’t want to manually mess with margins or padding. You are not going mad, there is, unfortunately, no way to do this with Divi’s built-in options.
In this quick simple tutorial, I will show you how to vertically align columns in Divi using a single line of CSS.
What You Need To Know For This Guide
- How to use the Internet
- A WordPress installation
- Divi Theme by Elegant Themes installed
Estimated time to complete this tutorial
5 minutes
Vertically Align Columns inside a row with the Divi Theme
Step 1: Add a new row, open that row, click on the design tab and select sizing. You will find a “Equalize Column Heights” option, make sure to set that to yes. This will add the CSS flex property to the row.
Step 2: Go back to the “Content” tab and add the column that you want to vertically align.
Step 3: Open the settings icon for that column, you will find a little cog on the left hand side of the column.
Step 4: Go to the “Advanced Tab” on the right hand side.
Step 5: Click on “Custom CSS”, inside you will find “Before Element“, “Main Element” & “After Element”.
Step 6: Click on “Main Element” and add the following snippet. “margin: auto;“
Conclusion
It’s as simple as that, you now have a vertically aligned column within Divi and the knowledge to utilize this nifty trick if you have need of it in the future. If you enjoyed this guide, please give it a share or leave a comment!
Remember, if you need any help, you can leave a comment on this post, or you can contact me on Facebook or Twitter.
You can also check out my latest post, The Number #1 Website Speed Testing Tool for 2021 if you’re looking for ideas on how you can improve the performance of your website.
Enjoy your Day!
