是否将CSS旋转文本定位到图像左侧？

这是我的网站：

我正在用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);
            }

这里有一些文字

p{
保证金：0；
文本对齐：居中；
-webkit变换：旋转（-90度）；
}

您可以将

位置

设置为

绝对

。之后，使用

左

和

顶

值将其置于左中间位置。

您可以将

位置

设置为

绝对

。之后，使用

left

和

top

值将其置于左中间位置

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

这里有一些文字

演示：

加价

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

这里有一些文字

---

---

演示：

为什么不

浮动：左？这是另一种可能性。@tcak absolution positing是我的第一个想法，但我无法让它工作。@BryceHanscomb如果我将它向左浮动，它确实会移到图像的左侧，但它位于底部，不是位于图像上方1/2的中心。为什么不
float:left？这是另一种可能性。@tcak absolution positing是我的第一个想法，但我无法让它工作。@BryceHanscomb如果我将其向左浮动，它确实会移到图像的左侧，但它位于底部，而不是位于图像上方1/2的中心。您可能应该添加
变换：旋转（-90度）以及.sure-moz变换：旋转（-90度）；对于figcaption，我将使用Position:relative；而不是绝对。@David Yancey position absolute是正确的，因为父图形具有相对位置检查w3c以获取更多信息please@kougiland谢谢，出于某种原因，我认为绝对位置是相对于窗口的，而不是第一个定位的祖先。你每天都会学到新东西：）你可能应该添加
transform:rotate（-90度）以及.sure-moz变换：旋转（-90度）；对于figcaption，我将使用Position:relative；而不是绝对。@David Yancey position absolute是正确的，因为父图形具有相对位置检查w3c以获取更多信息please@kougiland谢谢，出于某种原因，我认为绝对位置是相对于窗口的，而不是第一个定位的祖先。你每天都会学到新东西：）你可能应该添加
transform:rotate（-90度）也是。您可能应该添加
变换：旋转（-90度）也是。