jsong
(james)
December 20, 2013, 8:29pm
1
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?
thesergie
(Sergie Magdalin)
December 24, 2013, 1:12am
2
I’m not sure how to get something like this working. @callmevlad or @danro you have any ideas?
danro
(Dan Rogers)
December 24, 2013, 2:33am
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
3 Likes
jsong
(james)
December 26, 2013, 7:16pm
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?
brryant
(Bryant Chou)
Closed
December 30, 2013, 8:29pm
5
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.
brryant
(Bryant Chou)
Closed
March 13, 2014, 5:36am
8
This topic was automatically closed after 82 days. New replies are no longer allowed.