居中对齐三角形中的旋转文字

这是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”; –

居中对齐三角形中的旋转文字

回答

相关问题