旋轉文本，並在CSS中對齊？

旋轉然後將文本對齊到某些內容的側面的首選解決方案是什麼？旋轉文本，並在CSS中對齊？

<style> 
.wrapper { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #009; 
    margin: 50px; 
} 
.text 
{ 
    border: 1px solid #900; 
     -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
     -ms-transform: rotate(-90deg); 
     -o-transform: rotate(-90deg); 
      transform: rotate(-90deg); 

} 
.image { 
    border: 1px solid #090; 
} 
</style> 

<div class="wrapper">  
    <div class="text"> 
     Text to rotate 
    </div> 
    <div class="image"> 
     <img src="http://lorempixel.com/100/100"/> 
    </div> 
</div>

我希望文本對齊圖片旁邊的左下角（但不是在圖像的頂部，即沒有浮動）

我猜我可以使用position: relative; bottom: 0px或類似的東西，但有沒有更好的方法？

來源

2013-05-29 dan2k3k4

I think that this is what you are going for，但您可以使用transform-origin（根據需要使用相關的供應商前綴）更改轉換源。這情景，但在你的情況：

transform: rotate(90deg) translateX(100%); 
transform-origin: 100% 100%;

來源

2013-05-29 23:31:45

但現在的文本翻轉：> –

@AndreaLigios導致你需要把所有的'-browser -specifics' –

@AndreaLigios哦，我以爲那是你想要的。這個怎麼樣？ http://jsfiddle.net/ExplosionPIlls/nVtpz/2/ –

enter image description here

.wrapper { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.text{ 
 
    position: absolute; 
 
    width: 100%; 
 
    background:rgba(0,0,0,0.5); 
 
    color:#fff; 
 
    -webkit-transform: rotate(270deg) translateX(-100%); 
 
      transform: rotate(270deg) translateX(-100%); 
 
    -webkit-transform-origin: 0px 0px; 
 
      transform-origin: 0px 0px; 
 
} 
 
.image img{ 
 
    vertical-align:middle; 
 
}

<div class="wrapper">  
 
    <div class="text"> 
 
    Text to rotate 
 
    </div> 
 
    <div class="image"> 
 
    <img src="http://lorempixel.com/100/100"/> 
 
    </div> 
 
</div>

來源

2013-05-29 23:52:09

旋轉文本，並在CSS中對齊？

回答

相關問題