How to Vertically Align Content in Divi

by | Oct 3, 2017 | Divi Tutorial | 43 comments

Welcome to part 7 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.

In this tutorial, I show you “How To Vertically Center Content in Divi.” Divi has an option to “Equalize Column Heights,” but it doesn’t center the content in the modules which can be very frustrating. You can certainly do that by adding padding and margins to the Divi module your content is in BUT, if content gets rearranged, you’ll have to rework everything you did to make it look right again. Luckily, this tutorial shows you the quick and easy solution!

This tutorial is based off of this post by Michelle Nunan of Divi Soup which has helped me out tremendously. We’re going to take what she created but dive into it a little further and explain WHY and HOW it works.

Have fun! – Josh

Here’s the CSS I used:


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

***Update 11/16/17***

A fellow Divi designer made me aware that if you put this CSS in your stylesheet and click Equalize Column Heights, it’ll work without having to do the extra steps. But the old way in the tutorial will work as well 🙂

Step 1 – Add this to your stylesheet or custom CSS section:


.et_pb_equal_columns >.et_pb_column {
margin-top:auto;
margin-bottom:auto;
}

Step 2 – Add this to your stylesheet or custom CSS section:

Equalize column heights in your row.