CSS: czy istnieje sposób pionowego wyrównania liczb/punktorów przed każdym elementem listy?

Question

Próbuję utworzyć listę numerowaną, gdzie każdy element li zawiera obraz i blok tekstu. Numer listy, obraz i blok tekstu powinny być wyrównane w pionie wzdłuż poziomej linii środkowej. Blok tekstowy może składać się z wielu linii. Oto bardzo szorstki ilustracji:

Najbliżej mam osiągnięty jest następujący, który wyrównuje list-numer na dole (przetestowane w Chrome 15, Firefox 8, IE9). Zobacz także 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> 

Czy istnieje międzyplatformowy sposób robienia tego bez konieczności samodzielnego numerowania?

Edytuj. Jeszcze jedno wymaganie: jeśli szerokość kontenera jest bardzo mała (np. Podczas przeglądania na urządzeniu mobilnym), blok tekstu musi pozostać po prawej stronie obrazu. Wokół zdjęcia nie powinno się zawijać tekstu.

Answer 1

Hmm, to nie powinno być zbyt trudne do osiągnięcia. Po prostu upewnij się, że wszystkie twoje elementy są wyrównane w pionie do środka.

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; } 

Preview: http://jsfiddle.net/Wexcode/uGuD8/

Z wielu linii bloku tekstu: http://jsfiddle.net/Wexcode/uGuD8/1/

z auto-szerokość multi-line bloku tekstu : http://jsfiddle.net/Wexcode/uGuD8/11/