Vertically center a line inside a column

[nualexan]

Hello,

I need to center a line inside a column.
I used the same sugestion received in this post: https://theme.co/apex/forum/t/center-a-content-area-vertically-on-a-row/25513/5

But didn’t work.
Here’s a simple image to explain what i need:

I think it’s because we’re dealing with only one element inside a column… i’m stuck
Can you help me?
Regards,

      Nuno

[Joao]

Hi There,

Please click on the columnize tab of the column where the element is placed and add the following code to inline CSS:

display: flex; align-items: center;

Hope it helps!

[nualexan]

Thank you Joao, for your reply, but with this CSS the line is centered horizontally and not vertically on the column… as you can see in the picture:

I thought i need to add flex-direction: column, but the result was the same.
Any idea?
BR

[jumar]

Hello there,

Thanks for writing in!

Please update the code suggested by my colleague to this.

display: flex; align-items: center; max-height: 50%;

Hope it helps.

[nualexan]

Hello,

Didn’t work…
Meanwhile, i read a post hat gave the sugestion, in a similar case, to put in the inline CSS of the column:

vertical-align: middle !important;

It worked. But now i have a different question… as i’m going to have a lot of situations like this, because i use these dashed lines in a column to separate the blocks on the page, i wonder if there’s some way to create a class that allways center the line and apply this class to all columns that i have.
If so, how can i do this?
Thank you and regards,

          Nuno

[Joao]

Hi Nuno,

Yes you can create a class.

Add the following code to Theme Options CSS

.x-column.centered { 
 vertical-align: middle !important;
}

And add the class centered to each column

Hope it helps

[nualexan]

Hello Joao,

I created the class in the CSS page (Theme options).

Then i went to the column in the page and write the class .centered in the class name.

Didn’t worked
Am i missing something?
Thank you.
Best regards,

      Nuno

[jumar]

Hi there,

Please update it to centered instead of .centered.

Thank you.

[nualexan]

Small detail
Thank you very much!
BR

Nuno

[nabeel]

Glad we could help.

Cheers!