Align Content In The Middle Of A Column With Divi

Here’s another great little CSS snippet we use pretty often on sites to create a really nice, modern look without messing with the column padding too much to center elements. While using the WordPress theme, Divi, you use the awesome power of the “display: flex” property!

View the live snippet here!

Now let’s go through the steps to align content in the middle of a column with Divi:

Creating the section

1. Add your new section and 2 column row. In the Section and Row modules set the top and bottom padding to 0px. In the Row module under the Design tab, set the custom gutter width to 1, under Equalize the column heights select Yes, and set the Width to 100% and move the Max Width to the right as far as it will go (maxes out at 2560px).
   
2. Next we will need to add some padding to both columns. I used 80px for the top and bottom and 4% for the left and right. Do this for both columns.
   
3. Give the first column a background image or color. Then also add a Divider Module with a height of whatever you choose (I used 500px). Be sure to select No under Show Divider.
   
4. In the second column you can add whatever text or content you want!
5. In the Section Module, open the Advanced Tab and under the CSS Class: give the section module the following class: align-middle
   
6. Select the Save & Exit button and update the page.

Adding the custom CSS

1. Here at FreshySites we use a child theme, so you would need to go to Appearance > Theme Editor to find the style sheet. If you don’t have a child theme go to Divi > Theme Options > Custom CSS.
2. Add this CSS:

   /* ---------- Align Middle Row ---------- */
   .align-middle .et_pb_row.et_pb_equal_columns {
   -webkit-align-items: center;
   align-items: center;
   }

That should do it! Go ahead and play around with the mobile column padding and divider module height if they are too tall on tablet and phone screens!