居中對齊三角形中的旋轉文字

這是HTML標記。

<div id="container"> 
    <img id="rotate" height="80" width="80" src="http://i.imgur.com/dEM0KGG.png" /> 
    <span id="text">Download</span> 
</div>

這裏也是CSS。

#container { 
    position:absolute; 
    height:80px; 
    width:80px; 
    left:0px; 
    top:0px; 
    overflow:hidden; 
    z-index:2147483647; 
} 

#rotate { 
    position:absolute; 
    height:113px; 
    width:113px; 
    -webkit-transform:rotate(-45deg); 
    -webkit-transform-origin:100% 0%; 
    -moz-transform:rotate(-45deg); 
    -moz-transform-origin:100% 0%; 
    -ms-transform:rotate(-45deg); 
    -ms-transform-origin:100% 0%; 
    -o-transform:rotate(-45deg); 
    -o-transform-origin:100% 0%; 
    transform:rotate(-45deg); 
    transform-origin:100% 0%; 
    background:#3868D9; 
    right:0px; 
    z-index:9001; 

} 

#text { 
    position:absolute; 
    -webkit-transform:rotate(-45deg); 
    -moz-transform:rotate(-45deg); 
    -o-transform:rotate(-45deg); 
    -ms-transform:rotate(-45deg); 
    transform:rotate(-45deg); 
    z-index:9001; 
    top:35px; 
    right:0px; 
}

我想放置一個文本，如我所示。我面臨的問題是，文本可以動態更改，如果我使用相同的位置，它不會正確顯示。

有沒有什麼辦法可以根據文本/容器的寬度動態地定位它？容器的寬度也可以改變。現在它的80 x 80，但可以是50 x 50.我該如何定位它？

來源

2014-02-13 nyfer

爲什麼不分別旋轉整個元素而不是圖像和文本？ – Tzach

@Tzach謝謝你。我做了你所說的並把它放在一個div裏面。它來適當。 – nyfer

太好了。我已經發布它作爲答案。 – Tzach

嘗試在整個#container元素旋轉，而不是圖像和單獨的文本。

來源

2014-02-14 10:59:07 Tzach

你不能動態調整字體大小，你可以做的是用一點點js來解決你的問題！

<script type="text/javascript"> 
setInterval(function(){ 
    var cont=document.getElementById("container").style; 
    if(cont.width!="80px"){ 
     document.getElementById("text").style.fontSize="9px"; 
     document.getElementById("text").style.top="50%"; 
     } 
    else{ 
     document.getElementById("text").style.fontSize="16px";} 
},1);

只是將此代碼添加到head標籤

來源

2014-02-13 09:27:09

如果有任何機會，它不工作在setInterval上面添加這兩行：document.getElementById（「container」）。style.width =「80px」; document.getElementById（「container」）。style.height =「80px」; –

居中對齊三角形中的旋轉文字

回答

相關問題