How to vertically align text & images in Divi

Your text and/or image content in Divi will often look much better when it is vertically aligned.

There is no built-in option to vertically align content in Divi.

By using CSS with Divi you can make sure your content is aligned for any content height and is automatically adjusted for various screen sizes. 

There are 3 main ways to align your content vertically in Divi including;

• CSS Flex and Auto Margin – equalize column heights column background colors will be lost
• CSS Flex Direction – equalize column heights column background colors will not be lost
• Use align-items CSS in the row to align all columns content vertically

Option 1: Vertically align content in a row using Flex and auto-margin

1. In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes.This adds the CSS flex property to the row.
   
2. In your row settings Content tab, select the column you wish to vertically align and click on the setting icon for that column.Open the column settings Advanced tab, then open the Custom CSS section and the following CSS into the Main Element CSS box.

   margin:auto;
   

   As you can see below, there are 3 columns with Equalize Column Heights and a background color set. I added the auto margin CSS into column 2 which now displays the text and button modules vertically aligned.

   The column background color is no longer equalized for all 3 columns when using this method. If you want to maintain the column background colors on vertically aligned columns you can use the CSS Flex Direction method below.

   You can add the same CSS code to each column you want to vertically align.
   

Option 2: Vertically align content in a row using CSS Flex direction

1. In your row settings Design tab, click on the Sizing tab and set the Equalize Column Heights to yes.This adds the CSS flex property to the row.
   
2. In your row settings Content tab, select the column you wish to vertically align and click on the setting icon for that column.Open the column settings Advanced tab, then open the Custom CSS section and add the following CSS into the Main Element CSS box.

   display: flex;
   flex-direction: column;
   justify-content: center;
   

   As you can see below, there are 3 columns with Equalize Column Heights and a background color set. I added the CSS flex direction into column 2 which now displays the text and button modules vertically aligned.

   The column background color is still equalized for all 3 columns when using this method.

   You can add the same CSS code to each column you want to vertically align.
   

Option 2: Vertically aligning content for all columns

The 2 methods above can be used to add the vertical alignment to any, or all, of the columns within your row by adding the CSS to each of the columns manually. If you know you want all columns in a row to be vertically aligned it may be better to set them all in 1 place.

To vertically center the content in all columns in a row you can add a single line of CSS into the rows advanced settings.

1. In your row settings Advanced tab, click on the Custom CSS tab and add the following code;

   align-items: center;
   

   

Watch the video below to see the vertical-aligned content in action