fbpx

blog          course

Yellow

about          contact

How to Vertically Center Content in Divi

In this step by step tutorial, you’ll learn the custom CSS you need to vertically center any piece of content using the Divi theme and page builder. This beginner tip is easy and will make a huge difference on your WordPress website layout!

Kristen Leigh | WordPress Web Design Studio | Divi Theme How To Vertically Center Content in Divi

Updated: January 6, 2020

The Divi Theme and Page Builder allows for so much customization but like all tech tools, it has it’s limitations. One limiation I found and searched high and low for a solid solution for was vertically aligning content. This could be vertically aligning a row within a section, an entire column, or just text within a module.

When I first started designing and building websites on WordPress using Divi, I was so frustrated when I couldn’t get content to vertically align. All I wanted was for the content in two columns to be centered, not from right to left but from top to bottom.

I added an image to a column on the left side of the page and text to a column on the right side of the page. Both of these pieces of content started at the top of the row which meant the image took up the whole screen top to bottom and the text only took up half the screen top to bottom.

It looked terrible! After spending hours Googling “how to center content in Divi,” finding mostly information on how to center content left to right instead of top to bottom, and reading or watching a bunch of tutorials I finally found something that worked.

You don’t need to go through the same trouble I did to figure out how to do something that’s so simple but that makes a HUGE impact on the visual appearance of your design. I’m sharing the exact steps with you today!

From This to That

To ensure you really understand what I mean by my super technical terminology: top to bottom, not left to right (that’s advanced web development speak, right?) here’s an example of content that has been added to two columns in Divi but HAS NOT been vertically aligned (top to bottom).

You can see the image and text are top aligned. Below the text is white space.

Kristen Leigh | Web Design Studio | Content That is Not Vertically Centered

Below is the same content after it HAS been vertically aligned (top to bottom) using the CSS below.

Kristen Leigh | Web Design Studio | Vertically Center Content in Divi

CSS to Vertically Center Content in Divi

Here’s what you need to do!

First you need to add a bit of CSS to the Custom CSS field in Divi.

  1. Go to the Dashboard page of your WordPress website
  2. Hover over Divi in the left-hand menu
  3. Select Theme Options
  4. Scroll down to where you see Custom CSS
  5. Paste the code below into the Custom CSS field and press Save

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

Now enable the visual builder on the page where you want to vertically center content (top to bottom).

  1. Open the Row Settings
  2. Go to the Design tab
  3. Click Sizing
  4. Make sure Equalize Column Heights is set to YES
  5. Go to the Content tab
  6. Click the Gear icon next to the first Column
  7. Go to the Advanced tab
  8. Click CSS ID & Classes
  9. Paste ds-vertical-align into the CSS Class fields
  10. Click Save
  11. Repeat steps 6 – 10 for each of the Columns in the Row

Your content should now be vertically centered (top to bottom).

Want more Easy CSS and HTML Tricks?

You can learn even more quick and easy CSS and HTML to build a beautiful Divi website here.

-Kristen

You might also like…

Kristen Leigh | Web Design Studio | January 2019 Monthly Review of My Web Design Studio | How to Vertically Center Content in Divi
Kristen Leigh | WordPress Web Design Studio | Customize Your WordPress Website Using Easy CSS
Kristen Leigh | WordPress Web Design Studio | How To Vertically Align Content in Divi
Kristen Leigh | WordPress Web Design Studio | How to Customize the Divi Theme
How to Make Web Design a Number One Source of Income Without Any Previous Web Design Skills | Free Training | Kristen Leigh

4 Comments

  1. Hanneke de Graaf

    Hello Kirsten,

    Thank you very much for your clear instruction. It helped me a lot after trying everything!

    Reply
    • Kristen Leigh

      You’re very welcome Hanneke! I’m so glad that it helped you. I spent SO MUCH TIME trying to figure out how to do this so if I can save even a single person the struggle and time, I’m so glad!

      Reply
    • Kristen Leigh

      Hey there Nicolai! I spent hours looking for tutorials that would help me find this solution, so yes, “so much time” is accurate. After spending all that time, I wanted my audience to be able to find the solution easily. Divisoup’s code has been shared by a bunch of different web design bloggers. I didn’t realize that’s where the code came from (I’ve personally only browsed their website once) but I linked back to it in my post. Thanks for the heads up!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Hey there, I’m Kristen!

Kristen Leigh | WordPress Web Design Studio

Check Out some of My Favorite Tools ↓

Divi WordPress Theme
Monarch Social Sharing Plugin

Affiliate Disclaimer

*Hey hey! Yes, there are affiliate links throughout the Kristen Leigh website. I don’t promote products, tools, or services I’ve never used before or that I don’t absolutely love. By clicking the link and making a purchase, I may receive a percentage of the sale.

Pin It on Pinterest

Share This