Code by Day | Explore By Weekend

How To Vertically Align Content In Divi Columns

This code snippet from the Divi Code Snippet Club will allow you to vertically align and center content in Divi columns. Just use this simple snippet!

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!


Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Other Code Snippets

Leave A Response!

Notify of
Inline Feedbacks
View all comments

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Would love your thoughts, please comment.x

Pin It on Pinterest


Your Cart