Follow us

Vertically Center Any Content in Divi - Tutorial for Divi | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

Something I see asked so often and is actually really simple is how to vertically center content. Like when you have some text next to an image but the text doesn’t fill the whole space, you want it to sit in the vertical center of the column rather than at the top.

You can do this with padding to an extent but this can throw your layout off on smaller screens if you don’t add some media queries and of course FireFox doesn’t always play nice with percentages which you need to use for responsiveness.

Adding a custom CSS class to your stylesheet means you can vertically center any content in a matter of seconds.

So let’s get cooking!

Ingredients

 

The Divi Theme from Elegant Themes

 

Cooking time

 

This should take you around 3 minutes max.

 

Preparation

 

Let’s set up a section. 

Add a new standard section with how ever many columns you want to use for your layout, I am using four in this example.

Vertically center any content in Divi

 

Then open up the row settings and in the Advanced Settings tab set Equalize Column Heights to Yes. Then Save & Exit.

Vertically center any content in Divi

 

Method

 

Now add your modules and content to the row, you can use pretty much anything. Here is a rough example. I am using image, text, blurb and button modules and as you can see, all the content is aligned to the top.

Vertically center any content in Divi

 

Next, go back into your row settings and in the Custom CSS tab, add the class ds-vertical-align to each of the Column CSS Class fields you want vertically centered. I have added to all four columns here but you don’t need to if you don’t want to. Then Save & Exit.

Vertically center any content in Divi

 

Now for the CSS, add this little snippet to your child theme stylesheet, Divi options custom CSS box or the page specific CSS box. I would advise adding this to your child theme stylesheet so when you want to use it again all you have to do is add the class to the relevant columns and switch on equalize column heights in the row advanced settings.

.ds-vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

 

Now your content should be nicely aligned to the vertical center like this:

Vertically center any content in Divi

And that’s it. No more messing with padding and media queries to vertically center your content!

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!