Streaming live at 10am (PST)

Unable to centre my text vertically


#1

Hi All,

Probably a dead simple one i've missed but I can't seem to get my text to centre align vertically. Strangely enough, the image next to it will vertically align fine.

Can someone tell me what I'm missing.

In designer view it appears to be vertically centred fine, however in Google Chrome it's not. Please see examples below and the shared link:

https://preview.webflow.com/preview/monitor-4-header?preview=5434ad4ee68c90f8b6f28076c998d635


#2

You rely on a vertical centering method that relys on both a move down 50% and a transform shift up -50%, wich is fine and works well.

Then you add an interaction to it saying when the mlement appears on screen, transform shift it back to origin, which cancels your transform shift -50% actually.

That's why your text ends up not being centered. It's like you'd only give it the move down 50%.


#3

I thought Negatives are a big No No with cross browser compatibility?


#4

Hi Vincent,

I removed the interaction and this in now working.

I'm a little confused though as this works perfectly well for the image? The image has the identical interaction albeit from fading from the right.

I've now applied the interaction to the element above so I get the same effect but the text stays vertical. Thanks for your help.

Pete


#5

this makes all the difference. You don't "cancel" the up transform displacement that's needed to vertically center the element.


#6

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