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:
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 (settings for column):
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;
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?
