Streaming live at 10am (PST)

Vertical Centering


#1

I found an issue with vertical centering i think it might be related to the fact that vertical position with % value seems not to work or have any impact.

I need to center an image inside a column.

Best,


#2

#3

@LJB You are meant to vertically center thru relative positioning give it 50% from top and 50% from bottom. Unfortunately, this seems not to work with % right now and only with PX values. Maybe @cyberdave can help?


#4

Set top to 50%

Scroll down to transforms, set transform Y to -50%

Sorted


#5

@JoeMillion Thanks. But does not work for me.
Just to confirm I set relative positioning to 50% from top and set transform Y to -%50.

What happens is that the image shoots above the column, as I think the relative positioning does not work.

i.e If I just add some relative positioning with % then nothing happens.


#6

Make that absolute positioning and make the parent element be position: relative;. Also make sure that your image (beside transform Y -50%) also is transforming X -50% and is set to be left: 50%

In less complex way:

  1. Parent element has to be set like this:
  2. Your image has to be set as here:
  3. And when you scroll down to Transforms:

Let me know if that worked for you :)

Cheers,
Bart


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.