css - 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値をいじって、左中央の位置に持ってきます。