Как центрировать Вращающийся текст с CSS

Question

Я пытаюсь написать панель с повернутыми вкладками. Вращение выполняется с помощью transform:rotate. Проблема: width:100% вычислено до вращения, поэтому на самом деле будет установлено значение 100% высоты повернутой вкладки.

.tab-caption { 
    position: absolute; 
    width: 100%; /* width before rotation! */ 
    top: 50%; 
    height: 2px; /* actual text will overlap! */ 
    margin-top: -1px; /* subtract half the height */ 
    line-height: 0px; /* centre the text on the base line */ 
    text-align: center; 
    transform: rotate(90deg); 
    white-space: nowrap; 
} 

Вертикальное центрирование работает правильно, даже если текст перекрывает div. Для горизонтального центрирования этот трюк не работает; текст всегда начинался слева, хотя был указан text-align:center.

скрипку здесь: http://jsfiddle.net/digorydoo/pzvuntd4/

В скрипке, все работает отлично для коротких подписей, так как высота, которая становится шириной после поворота меньше, чем подпись. Для длинных титров центрирование выполняется неправильно. Как это исправить?

Answer 1

На самом деле это очень просто:

.tab-caption { 
    position: absolute; 
    /* width: 100%; */ /* (remove this) width before rotation! */ 
    top: 50%; 
    height: 2px; /* actual text will overlap! */ 
    margin-top: -1px; /* subtract half the height */ 
    line-height: 0px; /* centre the text on the base line */ 
    text-align: center; 
    left: 50%; /* added */ 
    transform: translateX(-50%) rotate(90deg); /* added translateX */ 
    white-space: nowrap; 
} 

Демоhttp://jsfiddle.net/pzvuntd4/2/