How to vertically centralize text or content in DIVI

How to vertically centralize text or content in DIVI

Vertically centralize text box and content in DIVI.

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 shorter 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 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:

DIVI Row Settings

Click on the Design tab:

DIVI row design settings

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

DIVI row design settings sizing

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

DIVI column content

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

DIVI column settings advanced

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

DIVI column advanced settings main element css

CSS: Method 1

The CSS code is:


Now click the green tick and save it.

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

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

CSS: Method 2

Another option 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 the browsers. That’s why we recommend using the former CSS (method 1).

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

Related Posts