How to align elements on the same line on Divi

The ability to vertically align the contents when creating a site with Divi can be a handy addition to your design tool. Sometimes a certain provision requires that the contents is aligned vertically in different ways (centered, bottom, top). The most common need is to center your contents vertically.

It provides a delicious touch of symmetrical spacing that comes in handy when using multiple column layouts for your content. Additionally, vertically-centered content remains centered at different browser widths, eliminating the hassle of applying custom padding or margins to achieve similar responsiveness.

In this tutorial, I'll show you how to add a few small CSS snippets to any column to vertically align the content. I'm going to use some of the pre-made layouts from Divi for examples of how to do this. If you don't know much about CSS, you don't have to worry. It will be quite easy to apply to your own layouts in seconds.

Understanding Flex and Divi

The css Flex (or Flexbox) property is simply a way to position items in horizontal and / or vertical stacks (much like a table). Except, unlike traditional tables, the flex property lets you create boxes that will adjust to the size of the content it contains.

Divi uses the flex property whenever you select “Equalize Column Heights” as a row parameter. This simply ensures that the size of your columns will adjust to the size of the column with the most content. And since “Equalize Column Heights” enables flex for the row container, you can easily take advantage of it by adding css to your columns to adjust the contents of each column (or area).

For example, if you add "margin: auto" to a column in a row, the content of that column (whether it is one or more modules) will become vertically centered.

In addition, if you add "align-items: center" to your line, all your columns (and their contents) will be centered vertically.

Of course, there are many other uses for the Flex property in web design, as well as more advanced CSS that you can apply to your theme. But for this tutorial, I wanted to keep it simple.

Is it really necessary?

Technically, no. You can vertically align your content / modules in a column using custom spacing (padding and margin). For example, you can use Divi's spacing options to give a column equal to the top and bottom padding to center the module (s) vertically in the column. You can also add only top padding to a column to align bottom content. However, you may need to adjust the spacing when updating your page with more content. Additionally, it can be difficult to maintain this alignment across different browser widths.

So if you're looking for a solution to vertically align content without having to think about custom spacing, I think you'll find this useful.

Let's start!

Load the predefined layout on your page

To begin with, I'll be using the layout from the Interior Design Company Portfolio range. To get this layout on your page, create a new page. Then give your page a title. Click on “Use Divi Builder” then on “Use Visual Builder”. Then select the option "Choose a basic layout". Then select the Interior Design Company layout kit from the Load from Library pop-up window. Finally, select the Portfolio page from the list of layouts and click "Use this layout".

Once the layout is loaded on your page, you are ready to go.

Method 1: How to Vertically Align Content Using Flex and Auto Margin

Open the line settings for the second line of the page (the one directly below the line with the page title). Under Design Settings, open the sizing option group and notice that "Equalize Column Heights" is already active. This means that the line now has the flex property (“display: flex;”) added.

Now go to the settings of the Advanced tab for the same row and add the following css snippet under the entry box of the main element of column 2.

Now the contents of the second column have been moved to be centered vertically.

Make lower content aligned

If you want to align your content on the bottom so that all modules stack at the bottom of your column, you can adjust the margin value as follows:

Vertical alignment of content for all columns in your row

Instead of adding "margin: auto" to each column individually, you can also vertically center the contents of all columns in your row by adding the following snippet to the main element of your row settings.

Or if you want all the contents of your columns to be aligned at the bottom, you can add this excerpt:

And don't forget that you can take advantage of Divi's Extend Styles feature by right-clicking on the main element with your CSS snippet and clicking on "Extend main element".

Then, extend this main css element to all the lines of the page (or section) to vertically center all the contents of each column of the page.

Now everything is centered vertically.

But, you may have noticed that the background color of the white column no longer covers the entire height of the row. This is because we added “margin: auto” to the column. To resolve this issue, you can change the background color of the line to white and remove the fill from the line. But instead, I'll show you a way to center your column content without changing the margin.

Method 2: Align content vertically using column flex direction

In the first method, we took advantage of the flex property added to the row. This made each of our columns a “flexible box” that could be aligned vertically by simply adjusting the margin.

But there is also a flex-direction way to align our column contents without losing the “Equalize Column Height” effect which keeps our columns (and column backgrounds) the same size. To do this, we'll just add a few lines of CSS to our column so that all the modules in the column are stacked vertically and then centered.

Let's go back to our line in the previous example. Open row settings and remove any custom css you may have there by right clicking on custom CSS and clicking "Reset custom CSS styles".

Then add the following CSS under the 2 column, main element:

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

Or, if I wanted to align the content at the bottom, just replace "Justify the content: center" with "justify the content: flex-end".

What's great about this setup is that if my content is centered vertically and the row width is reached, the content stays centered.

Make blurbs (Summary) with different amounts of vertically aligned text

Making your column content vertically centered can also be useful for blurbs. As you know, not all blurbs will contain the exact amount of text used to dto write function or service. Centering these blurbs vertically can create a beautiful design for your layout.

For this example, I'll be vertically aligning the blurbs to the Digital Payments homepage layout.

I'm going to add different amounts of body text to the blurbs first to give a more realistic representation of what a site might look like.

Now I have to go to the line settings and "Harmonize column heights".

Now I can add my CSS snippets to align my content and modify the design.

Under the Advanced tab of your row settings, we can vertically center the content of our columns by adding the following under Main Element:

Or change it by following to line them down.

You can also reset your custom CSS styles and add the following custom margins to align the first column bottom and the third aligned column top.

1 column CSS main element:

3 column CSS main element:

What about single column layouts?

Technically, you don't need a CSS or flex snippet to vertically center your column content. All you need to do is make sure you have equal spacing above and below your content (or modules). Most of the time, users need vertical content centered on layouts with multiple columns because they want adjacent content to line up perfectly.

That's all for this tutorial which shows you how to align elements on the same line on Divi.