I want to stack these two elements on top of each other. I wanted the text to align in the center of the popup container, but I can’t seem to do it with a rotated element.
.popup {
background-color: #f48277;
width: 70px;
height: 200px;
position: fixed;
right: 0;
bottom: 30vh;
border-radius: 70px;
}
.popup-text {
transform: rotate(-90deg);
color: white;
font-size: 26px;
font-weight: bold;
position: fixed;
right: 0;
bottom: 43vh;
}
a {
text-decoration: none;
}
@media screen and (max-width: 600px) {
.popup {
width: 60px;
height: 170px;
}
.popup-text {
color: white;
font-size: 16px;
font-weight: bold;
}
}
<div class="popup">
</div>
<a target="_blank" href="https://google.com">
<p class="popup-text"> Save 20% |</p>
</a>
3
Answers
I’d suggest putting everything inside the same container, so your HTML looks like this:
Aligning two different elements can get messy very quickly when they don’t share the same parent.
You can use
writing-mode: vertical-rl
to rotate the text. Additionally you can usetransform: rotate(180deg)
to flip the text as well:You can then use
display: flex
on the container to center the text both horizontally and vertically:The problem was because you needed to put text inside a parent div and rotate the parent div not the text itself.
That’s why text wasn’t stable inside the div.
Just going to throw in my two cents: if it were me, I’d make the banner horizontal, put everything in it like normal, and then rotate the whole deal 90 degrees: