With this code snippet you can center text (or other elements) vertically in the column.
This makes sense, for example, if you have an image in the left column and you want to display a text vertically centered in the right column.
The advantage of this code snippet compared to centering text with a padding top is that the element is exactly centered even if the screen width changes (e.g. desktop vs. laptop).
Step 1:
To center your elements, first open the settings for the corresponding row (turquoise) and use the cogwheel in the “Content” tab to open the settings for the column in which you want your text to be centered.
Now insert the following code under Advanced > Custom CSS > Main Element.
display: flex; align-items: flex-start; justify-content: center; flex-direction: column;
Now click “save changes”. You won’t see any changes yet because you need to change the column heights first. I will show you how to do this in the next step.
Step 2:
Go to the row settings and under Design > Sizing you set the switch for Equalize Column Heights to “Yes”. Now, the text should be centered in the column.
