CSS：各リスト要素の前に数字/箇条書きを縦に並べる方法はありますか？

Question

各li要素にイメージとテキストブロックが含まれている番号付きリストを作成しようとしています。 list-number、image、およびtextブロックは、すべて水平方向の中心線に沿って垂直に配置する必要があります。テキストブロックは複数の行にすることができます。ここでは非常にラフイラストです：

私が達成した最も近い（クロム15、Firefoxの8、IE9でテスト）下部のリスト番号を整列以下、です。 jsfiddle mockupも参照してください。

<style type="text/css"> 
    li div { display: inline-block } 
    li div div { display: table-cell; vertical-align: middle } 
</style> 

<ol> 
<li><div><div><img src=widget.png></div><div>Caption Text Here</div></div></li> 
</ol> 

ナンバリングを自分で指定しなくても、クロスプラットフォームの方法がありますか？

を編集します。もう1つの要件：コンテナの幅が非常に小さい場合（例えば、モバイルデバイス上で見た場合）、テキストブロックは画像​​の右側に留まる必要があります。イメージの周りにテキストを折り返す必要はありません。

Answer 1

ええと、これは実際に達成するのが難しいはずはありません。すべての要素が真ん中に垂直に配置されていることを確認してください。

HTML：

<ol> 
    <li><img src="widget.png" alt /> <p>Caption Text Here</p></li> 
</ol>  

CSS：

ol { 
    white-space: nowrap; 
    padding: 0 40px; } 
li img { 
    vertical-align: middle; 
    display: inline-block; } 
li p { 
    white-space: normal; 
    vertical-align: middle; 
    display: inline-block; } 

プレビュー：自動幅複数行のテキストブロックでhttp://jsfiddle.net/Wexcode/uGuD8/1/

：複数行のテキストブロックでhttp://jsfiddle.net/Wexcode/uGuD8/

：http://jsfiddle.net/Wexcode/uGuD8/11/