-1

垂直方向に変換されたテキストが含まれている要素の中央になるようにします (これまでのところ、親 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

4

1 に答える 1

1

もっとエレガントな方法があるかもしれませんが、うまくいきます...これらの行を.rotate

top: 125px;
left: -125px;
text-align: center;
position: relative;
width: 300px;
于 2012-11-20T17:20:58.747 に答える