Quick Snack: Vertically center any content in Divi

by | Dec 17, 2016 | CSS Tips & Tricks, Quick Snacks

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

Quick Snack: Vertically center any content in Divi

 

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 rows 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. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. 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.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

If you liked this then you'll love

The Club

Find out more

Pin It on Pinterest

Share This

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

You have successfully joined the waitlist!