How to Vertically Align Content in Divi Using Flexbox
This is one of those things I Google every time 😅”
If you’re trying to vertically align content in Divi and your columns never line up properly, Flexbox is the easiest fix.
When content lengths vary, layouts can look uneven. Using Flexbox allows you to quickly create clean, balanced sections without adjusting spacing and padding.
Understanding Flexbox in Divi
Flexbox is a CSS layout method that helps control alignment inside a container.
In Divi, enabling Equalize Column Heights applies automatically Flexbox to your row, allowing you to align content more consistently with a super short line of code.
Creating the Layout
For this example:
- Create a row with 3 columns
- Add a Module to each column
The Issue (what you don’t want)
You’ll notice the content does not align evenly by default.
↓
The layout you are trying to achieve
↓
The Easy Fix (No Coding Experience Needed)
It’s literally one line of code — and yes, anyone can do it.
↓
Step 1:
Open the Row Settings
Go to:
Design → Sizing
Enable:
Equalize Column Heights
Step 2:
Add this line of CSS
Go to:
Advanced → Custom CSS → Main Element
Add:
align-items: center;
The Result
↓
Why This Works
Equalize Column Heights turns the row into a Flexbox container. Adding:
align-items: center;
tells Divi to vertically center the content inside each column.
Troubleshooting
- Make sure Equalize Column Heights is enabled
- Ensure the CSS is added to the row, not a module
- Check for extra spacing on modules
Conclusion
Using Flexbox is one of the quickest ways to vertically align content in Divi. It keeps your layouts clean, balanced, and consistent without relying on manual spacing.
What I actually do (time saver)
I like adding this to my default row preset.
Most of the time, I want everything to be vertically aligned anyway, so this saves me from doing it over and over again.
And if I don’t want it on a specific row?
Super easy to turn off:
- Go to the CSS field where the code is
- Just add a space to ‘break the code’
Because the preset code shows up in light grey, adding anything (even a space) overrides it.
This is one of the fastest little fixes in Divi, and it makes a huge difference in how clean your layouts feel. Also… bookmarking this might save you from Googling it again later 😄
