Vertically & horizontally align text after CSS rotation

Question

So I'm using CSS to rotate some text from horizontal to vertical (90 degrees) like so:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;

My problem is that this shifts the text way outside of the container div. Is there a trick to keep it inside the container? Is there some anchor point that I could set? What is a cross browser way to adjust post?

score 22 · Accepted Answer · edited May 26 '13 at 21:03

22

You could pull it back in with a few CSS properties...

#whatever {
    position: relative;
    top: -4px;
    right: -10px;
}

Alternatively, you could play with the transform-origin property:

transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */

edited May 26 '13 at 21:03

Flexo

87,323
22
191
272

answered Dec 22 '11 at 06:25

alex

479,566
201
878
984

3

what if I have resizeble parent element ? how will I be able to achieve it ?? – Hemang Rami Jul 18 '13 at 12:23
Thanks, works fine in FF. But is there a way to get it to work in IE8 as well with a workaround? – Mathias Conradt Jul 25 '13 at 12:23
FYI... to answer my previous comment above: alignment works in IE8 with the following: do not use "filter: flipv fliph", use "writing-mode: rl-bt;"... with conditional styles it works across IE and FF. – Mathias Conradt Jul 25 '13 at 13:37

score 3 · Answer 2 · answered Feb 06 '15 at 14:03

Alternative method, which is more browser compliant and doesn't need information about amount of text beforehand:

.disclaimer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    line-height: 15px;
    height: 15px;
    width: 15px;
    overflow: visible;
    white-space: nowrap;
}

http://jsfiddle.net/d29cmkej/

Vertically & horizontally align text after CSS rotation

2 Answers2

Linked