Time needed: 1 minute.

The weirdest thing about Divi is that it has always had a toggle to “Equalize Column Height” but it never had a way to vertically align content in columns. This is one of the code snippets that I use on literally every site I make.

  1. Add a custom CSS class to the column

    The first thing you need to do is add the class to your columns. Go to the Advanced tab and add “pa-vertical-align” to each column Custom CSS field. Change the Divi Gallery Image Aspect Ratio

  2. Toggle on the “Equalize Column Height” in the row settings

    Go to the row design settings. Find the Design tab and go to the first toggle. Turn on the “Equalize Column Height” button.

  3. Paste in your custom CSS code snippet

    Head over to the Divi>Theme Options and copy and paste the following snippet into the Custom CSS box at the bottom.

/*vertically align content in Divi columns*/
.pa-vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}

Now you can center your content in Divi columns!

0

Your Cart