Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aurelian Spodarec
10,801 PointsVertical middle face right align with CSS - mind-blowing! Help!
Hi there!
I'm trying to align verticallly midle the text, right now it's not.
The Y or X axies start from the left or bottom or however you want to go about that.
How can I make so no matter what size and what text is there the text stays always vertically middle?
If anything, please be it Vanilla JS if this can't be solved with CSS. My resources and patients have exceeded to the limit for this challenge xd
Psst, it needs to support IE, so no text orientation :D
1 Answer
Iain Simmons
Treehouse Moderator 32,305 PointsHere's a forked codepen where it is working: https://codepen.io/iainsimmons/pen/zJyVpq
I think the main thing is the extra transforms and the top/left values. Please note that the order of the transforms is important:
span {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
top: 50%;
left: 50%;
}
See how that goes for you.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsOh. Okay. So first we need to transalte the X and then once we are on it's center we can translate the Y so it stays in center and then roate it and stays in center.
Didn't knew the order is important, but that makes sense! Thanks! :)