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?

Answer 1

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 */ 

Answer 2

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/