旋转图像下方的文本并将图钉固定在图像的左侧

Question

我需要在图像下旋转一些文本并将其放在图像的左侧并垂直居中。我在CMS中使用它，因此图像的确切高度和宽度会有所不同。我还需要将图像置于页面中心。

这就是我所拥有的：

这就是我想要实现的目标：

这是我的小提琴，但我对它非常了解：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

希望这有帮助。