将CSS旋转文本放在图像左侧？

Question

这是我的网站： http://smartpeopletalkfast.co.uk/4/test

我用CSS旋转文本。我希望文本位于图像的左侧：

注意我现在只为css添加了webkit前缀。所以这是我粗糙的div结构和CSS。

<div>
 <img src="whatever.jpg" />
 <p>Here is some text</p>
</div>

p {
                margin: 0;
                text-align: center;
                -webkit-transform: rotate(-90deg);
            }

Answer 1

 *{
    padding:0;
    margin:0;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;       
}
figure{
    position:relative;
    left: 100px;
    top: 100px;
    width:200px;
    height:200px;
    border:4px solid #ccc;
}

img{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
figcaption {
 text-align: center;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg); 
transform: rotate(-90deg); 
position: absolute;
left: -100px;
top: 60px;
width: 150px;
height: 20px;
 }

标记

<figure>
    <img src="http://www.disney.co.uk/brave/common/images/characters/merida.png" />
    <figcaption>Here is some text</figcaption>
</figure>

演示：http://jsfiddle.net/NeeXm/

Answer 2

您可以将position设置为absolute。之后，使用left和top值将其置于中间位置。