Column content vertically centered

I Need Help
#1

Hi guys, I know this sounds easy to achieve but I am having problems to center content in colums.
When I add the bloc I get the alignment but in the moment I set a height I get a top aligmnent.
How could I achieve this?

I am also using some hover effects but this should not affect the positioning.

I know I can use some margin and padding, but when I hover any column, the text shows up and ruins the positioning

I have 2 styles applied to each column, One for the height and another for the background toggle on each column

Captura de Pantalla 2022-05-02 a la(s) 11.12.38
Captura de Pantalla 2022-05-02 a la(s) 11.12.381920Ă—625 179 KB

#3

Equal heights are what you’re looking for. Assuming.

#4

I think that´s not what I am looking for. I have a 450 px height and I want the content be centered inside that size. I am looking for the positioning

#5

Wrap all in a DIV and use flex.

1 Like
#6

Thank you jerry, I tried but I can not achieve what I am looking. I am a designer, not a coder and thats why I use blocs. I could touch some styles but this time this excedes me. I placed a column with a div and the style d-flex-align-items-center, and inside another column with the content and it does not work. Also tryed using only a div with a column inside and the same result.

#7

Well, no need to code anything. Blocs will do it all for you.

2022-05-02_20-06-26
2022-05-02_20-06-261486Ă—1112 169 KB

2 Likes
#8

Sounds stupid but I tried that before. I also had the issue that I am using a background and when I set the height of the column, the alingmnent is gone.

I used some positioning methods to optically center the info. Not the best choice but its working as it should

Thanks!