如何在父元素的中間放置90°旋轉文本

-1

我希望垂直轉換的文本位於包含元素（到目前爲止它顯示在父div的頂部）的中間。我的代碼可以在這裏看到：如何在父元素的中間放置90°旋轉文本

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

來源

2012-11-11 happyZZR1400

請在此發佈您的代碼。並解釋你已經做了什麼已經不能實現你的目標。 –

也許還有一個更優雅的方式做到這一點，但它的作品... 這些行只需添加到.rotate

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

來源

2012-11-20 17:20:58

如何在父元素的中間放置90°旋轉文本

回答

相關問題