Streaming live at 10am (PST)

Vertically center rotated text


#1

I'm trying to left-align, vertically centered rotated text kinda like here:

although their solution doesn't really work. I'd like it vertically centered in the browser on the left and rotated -90 degrees. any tips?


#2

I'm not sure how to get something like this working. @callmevlad or @danro you have any ideas?


#3

Working with CSS transforms can be a bit tricky. Luckily, webflow allows us to visually edit them and make tweaks along the way. Here's a demo I put together with some vertically rotated text:

Designer link:
https://webflow.com/design/rotate-demo?preview=dcce13ae2e267b5ced1d42cbc8f3d8d4

Published demo:
http://rotate-demo.webflow.com/

Keep in mind that you'll need to tweak the text width & margin to account for different text / spacing.. so this solution is for static text only... for dynamic text, you'd need a more complicated approach.

-Dan


#4

this is great! Did you just add a rotate transform and then manually tweak the width/height/position? is there a way to do this with percentages?


#5

This topic was automatically closed after 10 days. New replies are no longer allowed.


#6

#7

For me it seems to be done manually.

To make it automatically you should use following:

You can take the height of the inner-item and the width of parent-item. Divide both by 2 and take parent's value from inner.

$('.inner-item').css('left', $('.parent-item').width()/2 - $('.inner-item').height()/2);

If things like that are calculated by script you are always calculating each browser's CSS, font sizes etc. This way your div will always be centered.


#8

This topic was automatically closed after 82 days. New replies are no longer allowed.