Vertically center rotated text

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

http://stackoverflow.com/questions/14020643/how-to-align-rotated-text-in-the-middle-of-a-div

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?

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

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

3 Likes

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?

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

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.

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