How to Vertically Center Text in Divi
In this tutorial, I’ll show you how to How to Vertically Center Text in Divi and more importantly, how to make it automatically center when you click the “Equalize Column Heights” option in Divi.
To create a Vertically Center Text in Divi follow these simple 5 steps:
- Add the snippet of CSS Code below to your Custom CSS area or child theme stylesheet
- Open the Row settings
- Click the Design Tab
- Select Equalize Column Heights
- Click Save
Then you’re done! Easy peasy.
Here’s the CSS Code to add first:
.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}
Be sure to add this snippet of CSS to your Custom CSS area or Child Theme Stylesheet. Then just select the Equalize Column Heights option as shown below!
The method shown in my previous tutorial on How to Vertically Align Content in Divi is still relevant but this is a much quicker way to center align text and modules in Divi. I recommend saving this snippet of code for all your Divi sites moving forward!
Links & Helpful Tutorials mentioned:
- How to Vertically Align Content in Divi
- Divi Child Theme Explained
- Where to Put Your Custom CSS in Divi
- Save 10% on Divi Theme
Get a special discount when you use my affiliate link! - How to Make a Fullwidth Section in Divi
This is part 1 of this short tutorial series!
Recommended Courses:
- Divi/WordPress Beginners Course
Use code “diviwp22” at checkout to get the course for only $75! - Divi/CSS Course
Use code “css30” for $30 OFF the course!
Download Your FREE Fullwidth Divi Section Layout!
If you don't yet have an account on my site, create one then download this along with all other current and future freebies 🙂
Thanks for the freebie
I was in the middle of pasting that into my child theme CSS as you said you do that, lol! Another handy tip. Thanks Josh.
This is amazing!! Thanks so much.
This isn’t working for me :/ not sure what I am doing wrong! Any troubleshooting tips?
If you just added the CSS and it’s not working, just make sure to clear your cache and do a hard browser refresh. That’s usually the culprit!
Thank you! I put the CSS in another part of the editor and it seemed to work. Now I have a question….I definitely want this functionality in most places on my site, however there are some places (like the footer) I don’t want it vertically aligned. How do I NOT make a module vertically aligned in specific areas? Thank you so much for the help!
Any place you don’t want vertically aligned you just won’t check the equalize button then you’re all set.
duh! HA! Thank you so much!
You read my mind again Josh! Was wrestling with this very issue today and did it the old way with padding but prefer your solution. I’m just trying to consider if there might be a time when I would need to use equal column heights and not want the text vertically aligned so might use a class instead.
It doesn’t work for me… I don’t understand why. It’s so easy. I cleaned the cache, tried with other browser, nothing.
Im not sure where to put that code.