Are you looking to vertically align content in the Divi theme? If yes, you landed on the right spot. In this guide, you will learn how to align content vertically on your website.
Divi is a powerful and popular WordPress theme that allows you to create beautiful websites quickly and easily. It comes with a variety of features that make it easy to customize the look and feel of your website.
One of these features is its ability to align content within a page or post vertically. In this blog post, we will discuss the different methods of vertically aligning content with Divi, as well as how you can make the most out of this feature.
So, if you’re looking to align text and images in the Divi theme vertically, then continue reading this guide.
Why Vertically Align Text & Images?
Vertically aligning content on a website is important because it helps create a clean and consistent look. It makes the page easier to read, as all the elements are in an orderly fashion, and it also makes navigation simpler.
Furthermore, vertically aligned content helps with SEO by making sure that search engines can easily find and index the site’s content. Additionally, when all the elements of a website are properly aligned, it gives visitors a sense of organization and structure that can help them better understand what’s on offer.
How to Vertically Align Content in Divi Theme
Whether you are using the Divi Builder or the Visual Builder, there are plenty of options to make sure your content is properly aligned. With just a few clicks, you can easily make sure that your content is aligned and looking great!
Below, I have mentioned all the methods available to vertically align content in the Divi theme.
Method 1: Vertically Align Content Using CSS Flex and Auto-Margin
The first method that we are going to use to vertically align content in the Divi theme is by using CSS flex and auto-margin.
First, open “Row Settings” and go to the “Design” tab. Here, you have to enable the “Equalize Column Heights” under “Sizing,” as shown in the above image.
Next, open the settings of the column that you would like to vertically align. After that, navigate to “Advanced Tab > Custom CSS” and add “margin: auto;” in the “Main Element” field.
Method 2: Vertically Align Content Using CSS Flex Direction
In this method, we will use the CSS flex-direction option to align content vertically. To get started, enable the “Equalize Column Heights” by navigating to “Row Settings > Design > Sizing”
Next, open any column’s settings that you wish to vertically align. Here, go to the “Advanced” tab and paste the below CSS code under “Custom CSS > Main Element,” as shown in the above image.
display: flex; flex-direction: column; justify-content: center;
As you see in the image, there are two columns with Equalize Column Heights. So, I added CSS-flex direction into the first column, which now displays the text module vertically aligned. You can add the same CSS code to any column that you want to vertically align.
Method 3: Vertically Align Content Using Align-items CSS
In the above two methods, we have discussed how to vertically align content in columns by manually adding CSS to each column.
But, if you want to vertically align all columns in a row without manually adding CSS to every column, then you can do this by placing CSS rules in one place.
To make it happen, we will use the “align-items” CSS rule. After enabling the “Equalize Column Heights”, open “Row Settings” and go to “Advanced > Custom CSS”. Here, add the below CSS rule under “Main Element,” as shown in the above image.
align-items: center;
After adding the CSS rule, simply save the changes, and you will see that your text and images are vertically aligned. Here is how it looks before and after:
💡 Recommended Readings…
Wrapping Up!
In conclusion, vertically aligning content in Divi Theme is a simple and effective way to make sure your website looks professional and organized.
I hope this article helped you resolve your issue of aligning content vertically in the Divi theme. If you have questions regarding this, feel free to comment below.
