將圖像下的文字旋轉到圖像左側並將其固定在圖像左側

Question

我需要旋轉圖像下的一些文字，並將其放在圖像的左側並將其垂直居中。即時通訊使用此與CMS，所以圖像的確切高度和寬度會有所不同。我還需要將圖像置於頁面上。

這是我有：

而這正是我嘗試實現：

這裏是我的小提琴，但我havnt用它得到了很遠：http://jsfiddle.net/FgA8x/5/

這是html的粗略結構，但如果需要可以更改：

<div> 
    <img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="150px" height="250px" /> 
    <p>This is some caption text</p> 
</div>  

<div> 
    <img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="300px" height="250px" /> 
    <p>This is some caption text</p> 
</div>  

<div> 
    <img src="http://thumbs.dreamstime.com/z/young-footballer-1642893.jpg" width="500px" height="250px" /> 
    <p>This is some caption text</p> 
</div>  

Answer 1

我似乎無法得到正確的間距，但這是一個大致的想法，即如何使用標題文本上的容器上的display: inline和標題文本上的float: left將左側的標題排列在左側。下面有一個小提琴：

Fiddle

希望這有助於。