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>