Want updates & exclusive offers?

Hey there!

Vertically center Divi content in two simple steps

Vertically center Divi content in two simple steps

Vertically center Divi content in two simple steps

 

Sometimes you want to vertically center Divi content within multi-column rows. All you need to achieve this is to click one toggle, and add a single CSS property.

In this tutorial I’m going to show you how.

Let’s get started.

Equalise the column heights.

By default, if you have a multi-column row, all your column content will be aligned to the top. In the screenshot below, I have an image module in the left column, and a text module in the right. As you can see, the content in the text module is taller than the content in the image module.

Vertically center Divi content in two simple steps

 

To align the content centrally, and so that it adjusts position based on the device height, open the settings for the row you want to modify, and in the Design tab, turn on the Equalise Column Heights toggle.

Vertically center Divi content in two simple steps

 

Center the columns.

In the Custom CSS section in the Advanced tab, add the following CSS to the Main Element field, then save:

align-items: center;

 

Vertically center Divi content in two simple steps

 

Now your content should be nicely centered like this…

Vertically center Divi content in two simple steps

 

That’s it, all done!

Michelle x

Pro Pass Membership

Want access to all current and future Divi child themes, theme kits, and Canva kits for one low annual price?

Learn how to create Divi Child Themes that sell

Divi child theme course - Reloaded!
  • Use your existing industry knowledge to define and harness your niche
  • Productise your business with affordable website solutions for clients
  • Add a new revenue stream to your business that pays while you sleep
Find out more
Divi Child Theme Course
Are you

Struggling with Divi?

Struggling with Divi?

Hey! I want to make sure the content I create is helpful to the wider Divi community. If there's something you always find difficult to do when creating Divi sites, or a styling option you wish Divi had, complete the Divi tutorial request form and tell me all about it. I don't guarantee I'll be able to create something that solves the issue, but I'm smarter than your average bear so you never know!

P.S. - This is NOT a support request form and you won't be subcribed to any email lists. If you have an issue with one of our products, you can get help here.



First
Why? I might have questions, and if I create a solution I'll let you know.

Want a website like ours?

More posts

You might like!

How to replace the Divi search button with an icon

3 ways to use anchor links in Divi

Anchor links are used to navigate to specific content on a page rather than simply between pages themselves, and mastering anchor links in Divi is actually very simple. In this tutorial, I’m going to show you three ways to use anchor links.

You have Successfully Subscribed!