Позиция CSS повернутый текст влево от изображения?

Question

Мой сайт: http://smartpeopletalkfast.co.uk/4/test

Im вращающийся текст с CSS. Я хочу, чтобы текст, чтобы сидеть слева от изображения:

Примечание Ive только добавил префикс WebKit для CSS в данный момент. Так что это моя грубая структура 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 значениями, чтобы привести его в левое среднее положение.