css - 旋转图像下的文本并固定到图像的左侧

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标题文本使标题在左侧对齐的一般想法。这是一个小提琴：

小提琴

希望这可以帮助。