DIVIWordPress

How to vertically centralize text or content in DIVI

0
1.3k
2019 / 09 / 09

DIVI is one of the best WordPress theme so far. 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.

Along with cool features, there is a drawback in DIVI theme. It doesn’t allow to vertically central align a content within a row. Previously it was achieved by media queries but now there is an efficient solution to enable this feature.

There are a lot of solutions to achieve this but the most efficient is explained below:

First click on row settings

 

Now click on Design and under Sizing click YES for “Equalize Column Heights”.

Now click on Content and click on the gear icon (settings for column), for which you need to vertically centralize the content.

 

Once it opens, click on Advanced tab and under Custom CSS add some CSS code

 

The CSS code is:

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

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.

Hi, I am a full-stack web developer with 5+ years of experience in working with different web technologies. Do you want to ask something? just send me a message through the contact form. Please visit my portfolio at hamzamehmood.com. Thanks