css - 旋转文本并在 CSS 中对齐它？

Question

旋转然后将文本对齐到某些内容的一侧的首选解决方案是什么？

例子: http://jsfiddle.net/nVtpz/

<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>

我希望文本对齐到图像的左下角旁边(但不在图像顶部，即没有 float )

我想我可以使用 position: relative; bottom: 0px 或类似的东西，但有更好的方法吗？

Answer 1

I think that this is what you are going for ，但您可以使用 transform-origin 更改转换原点(根据需要使用相关的供应商前缀)。这是视情况而定，但在您的情况下:

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