Understanding Vertically Align Content in Divi
Vertical alignment refers to positioning content centrally or at specific vertical positions within a container. Think about a button perfectly centered in a column or text aligned in the middle of a hero section. It’s all about balance and aesthetics.
Step-by-Step Guide to Vertically Align Content
- Add a “New Section” with however many columns you want to use for your layout,
I am using two in this example.
Hover over the row containing your content and click the “gear icon”.
Got to the “Row settings” and in the “Design” tab set “Equalize Column Heights” to Yes.
Then “Save & Exit”.
Now add your modules and content to the row, You can use pretty much anything. Here is an example. I am using the left side image, right side size text, as you can see, all the content is aligned to the top.
Next, Go back into your “Column setting”, and in the “Advanced tab”, add the class “vertical-align-content” to each of the “CSS Class” “fields you want vertically centered. I have added to all two columns here but you don’t need to if you don’t want to.
Then “Save & Exit”.
Learn Where to Add Custom Code in Divi
Writing Custom CSS in Divi Theme Options
Add the following code:
Go to Divi > Theme Options > Custom CSS.
/* Custom CSS for vertical align content in divi */
.vertical-align-content{
display: flex;
flex-direction: column;
justify-content: center;
}Now your content should be nicely aligned to the vertical center like this:
That’s all for today!
Discover more by supporting me on
