css - 如何将旋转 90° 的文本放置在父元素的中间

Question

我希望垂直转换的文本位于包含元素的中间（到目前为止它显示在父 div 的顶部）。我的代码可以在这里看到：

CSS：

  .row{ 
   float:right;
   clear:right;
   width:830px;

 }
.caption{
   width:50px;
   background:dimGray;
   height:300px;
   margin:3px 3px 0 0;
   float:left;
   line-height: 50px;
   position: relative;

}
.diagramm{
   height:300px;
   float:left;
   background:lightGrey;
    width:770px;
    margin:3px 0 0 0;

 }
.rotate
{
     white-space: nowrap;
     -webkit-transform: rotate(90deg);
     -moz-transform: rotate(90deg);
     transition:  rotate(90deg);
                 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" /* IE8 */;


                 -webkit-transform-origin:50% 50%;

     color:white;
     font-weight:bold;

 }

========================= HTML：

<div class="row">
   <div class="caption">
     <div class="rotate">
    text
                  </div>
   </div>
    <div class="diagramm">
            <div id="chart_" style="height:300px; width:500px;">
    </div>
   </div> 
</div>
</body>

http://jsbin.com/unogov/3/edit

Answer 1

也许有一种更优雅的方式来做到这一点，但它的工作原理......只需将这些行添加到.rotate

top: 125px;
left: -125px;
text-align: center;
position: relative;
width: 300px;