How to vertically centralize text or content in DIVI

Achieving the perfect alignment can significantly enhance the visual appeal of your website. In this guide, we’ll explore the effective techniques to Vertically centralize text or content in DIVI. Whether you’re a novice or an experienced WordPress user, these methods will empower you to create beautifully balanced designs.

What is Divi?

DIVI is one of the most popular WordPress themes. It came with a lot of cool features which makes it very easy for a non-tech guy to design a website in a very short time.

The problem: vertically centralize text or content in DIVI

Along with cool features, there is a drawback to the DIVI theme. It doesn’t allow vertically central alignment of content within a row. Maybe in the feature versions of the theme, we get the feature. However, it is not supported till v4.17.4.

The solution

One of the older solutions to vertically centralize text or content in DIVI is to use media queries to fix the problem. There can be a lot of solutions to achieve this. But the most efficient solution is explained below.

At first, click on row settings:

Click on the Design tab:

Under Sizing, click YES for “Equalize Column Heights”:

Now click on the Content and then click on the gear icon (column settings):

Once it opens, click on the Advanced tab and open the Custom CSS section:

Under the Main Element, add the 2 linear CSS codes (you will see the CSS code in the below section) :

CSS: Method 1

The CSS code is:

margin-top:auto;
margin-bottom:auto;

or

margin:0 auto;

Now click the green tick and save it.

When we set equalized column height in row settings it sets the CSS flex property to the element.

Setting the margin auto to top and bottom will make it a vertical center.

CSS: Method 2

Another option to vertically centralize text or content in DIVI is to use the following flex property:

align-items: center;

However, this align-items property sometimes causes conflict and may not be supported in all browsers. That’s why we recommend using the former CSS (method 1).

CSS: Method 3

For advanced users seeking more customization, leveraging custom CSS provides the utmost control. Follow these steps:

• Access the row or module settings.
• Navigate to the Advanced tab and add custom CSS code to center the content vertically. For example:

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

This CSS snippet utilizes flexbox properties to vertically centralize text or content in DIVI within a module or row.

Conclusion: Perfecting Your DIVI Design

Mastering the art of vertically centralize text or content in DIVI opens up a world of design possibilities. Whether you opt for straightforward section-level adjustments or delve into the realm of custom CSS, these techniques empower you to create visually stunning and well-aligned websites. Experiment with these methods, discover what works best for your design goals, and elevate your DIVI theme experience to new heights!

In the next article, we will see How to make DIVI slider arrows visible all the time.