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

Question

Каков наилучший способ центрировать повернутый текст (270deg) в текущей ситуации? В настоящее время это положение относительно, но это не очень хорошее решение.

HTML:

<div id="side" class="container"> 
    <p id="sidetext" >Work</p> 
</div> 
<div id="cont" class="container"> 
    <div id="row" class="row"> 
     Hey yeah! 
    </div> 
</div 

И CSS:

#sidetext { 
    font-family: "Josefin Sans"; 
    text-transform: uppercase; 
    display: block; 
    font-weight: 100; 
    font-size: 1.7em; 
    color: white; 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    transform: rotate(270deg); 
    transform: rotate(270deg); 
    position: relative; 
    top: 216px; 
    margin: 0 22px 10px; 
} 

Answer 1

вы можете попробовать этот CSS.

.tab-caption { 
 
    position: absolute; 
 
    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; 
 
}