How to center text element within a column?

[Golfboy123]

Hello,

I would like to center the text element within a column avoiding to use the gap element, due to the format issues that may arise with different display sizes.

Is there a CSS solution for this?

Thanks.

[friech]

Hi There,

Thank you for writing in, if you mean horizontally center, you can set the Text element or the Column’s text-alignment option to center.

If you mean vertically center, yes please use the Gap element, use a responsive unit to its size, like em or %, and Gap element has a Hide During Breakpoints option, so you can easily hide this gap in a screen size that it does not look right.

Cheers!

[Golfboy123]

Dear Friech,

thank you for your reply, however, this does not resolve my problem. I wish to:

• Center a text vertically, not horizontal. I want to have 1 row with 2 columns. In one column will be a text and next to it a picture. The text shall be vertically in the middle of the column.

Furthermore, I do not wish to use the gap element, but rather seek a CSS solution.

Something similar to this website: https://www.mercurius.ca/

But, with the difference that in one column there will be a picture and in the other one a horizontally aligned text.

Thank you in advance.

[friech]

Hi There,

Thank you for the clarification, yes there is another way. Please turn on the Marginless Columns option of your ROW.

Then inspect the Column where you’ll be placing the text, under its Customize tab add the line of CSS code below on the Element CSS area.

$el {vertical-align: middle !important;}

Make sure your text has an equal top and bottom margin so they appear on dead center, or dont add a margin on the text at all.

Hope it helps,
Cheers!