CODEWITHSUNDEEP
cssrotationcenter
br0k3n
br0k3n

Reputation: 31

Vertically centered a rotate text

I tried the solutions in the previous questions, but none was successful. I've 2 dynamic text that need to be rotated and centered into their content div (left and right). All the solution that I tried doesn't work

Here's the code:

#sideLeft span,
#sideRight span {
bottom: 50%;
display: block;
line-height: 0em;
position: absolute;
text-align: center;
top: 50%;
white-space:nowrap;
width: 100%;
}

#sideLeft span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}

#sideRight span {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

#sideLeft,
#sideRight {
height: 100%;
position: fixed;
top: 0;
width: 18%;
}

#sideLeft {
left: 0;
}

#sideRight {
right: 0;
}
<div id="sideLeft"><span>Left text lorem ipsum sit amet</div>
<div id="sideRight"><span>Right text pellentesque lectus erat, condimentum quis sem vitae, facilisis </span></div>

Please, could you help me?

Thanks in advance :)

br0k3n

Upvotes: 0

Views: 748

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

To center something (since you use transforms) you can translate it to -50% in both directions, after positioning it to the center of its container.

Also you should set the transform origin to be at the center of the element.

So this should fix it

#sideLeft span, #sideRight span {
    top: 50%;
    left:50%;
    position: absolute;
    text-align: center;
    white-space:nowrap;

    -webkit-transform-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    -0-transform-origin:50% 50%;
    transform-origin:50% 50%;
}
#sideLeft span {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -moz-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
}
#sideRight span {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    -moz-transform: translate(-50%, -50%) rotate(90deg);
    -ms-transform: translate(-50%, -50%) rotate(90deg);
    -o-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}

Demo at http://jsfiddle.net/uwLdox77/

Upvotes: 1

Related Questions