The possibility of vertically align elements on same line divi when creating a site with Divi can be a practical addition to your design tool. Sometimes a certain layout requires content to be aligned vertically in different ways (centered, bottom, top). The most common need is to center your content 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 will show you how to add a few small snippets of CSS to any column to vertically align elements on same line divi. I’ll use some of Divi’s pre-built layouts for examples of how to do this. If you don’t know much about CSS, you don’t have to worry. It will be pretty easy to apply to your 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 allows you to 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 the row parameter. It just 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 content 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.
Additionally, if you add “align-items: center” to your row, all of 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.
Vertically align elements on same line divi: is it really necessary?
Technically, no. You can vertically align elements on same line divi 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 elements on same line divi without having to think about custom spacing, I think you’ll find this useful.
Let’s get started!
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 loads on your page, you’re good 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 the 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 vertically centered.
Make bottom content aligned
If you want to line up your content at 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 of your column content to line up at the bottom, you can add this snippet:
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 the main element”.
Then extend that main CSS element to all rows on the page (or section) to vertically center all content in each column on 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 thereby right-clicked on custom CSS and clicking “Reset Custom CSS styles”.
Then add the following CSS under Column 2, the main element:
Or, if I wanted to align the content at the bottom, just replace “Justify content: center” with “Justify content: flex-end”.
What’s great about this setup is that if my content is centered vertically and the line width is reached, the content stays centered.
Read more: How to use the blog display formats on Divi
Make blurbs (Summary) with different amounts of text aligned vertically
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 describe the feature or service. Centering these blurbs vertically can create a beautiful design for your layout.
For this example, I’m going to align the blurbs vertically with the layout of the Digital Payments homepage.
I’ll 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 row settings and “Match column heights”.
Now I can add my CSS snippets to align my content and change 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 next to line them up at the bottom.
You can also reset your custom CSS styles and add the following custom margins to align the first column bottom and third column top aligned.
Column 1 CSS main element:
margin: auto auto 0;
Column 3 Main CSS element:
margin: 0 auto auto;
What about single-column layouts?
Technically, you don’t need a CSS snippet or flex 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 that is 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.
For website maintenance service contact us.