CSS: c'è un modo per allineare verticalmente i numeri/punti elenco prima di ogni elemento della lista?

Question

Sto tentando di creare un elenco numerato in cui ogni elemento li contiene un'immagine e un blocco di testo. Il numero elenco, il blocco immagine e il testo dovrebbero essere tutti allineati verticalmente lungo una linea centrale orizzontale. Il blocco di testo potrebbe essere costituito da più righe. Ecco un esempio molto approssimativa:

Il più vicino che ho raggiunto è il seguente, che allinea la lista numero in basso (testato in Chrome 15, Firefox 8, IE9). Vedi anche 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> 

C'è un modo multipiattaforma per farlo senza fornire la numerazione da solo?

Modifica. Un altro requisito: se la larghezza del contenitore è molto piccola (ad esempio, se visualizzata su un dispositivo mobile), il blocco di testo deve rimanere a destra dell'immagine. Non ci dovrebbe essere alcun testo che avvolge l'immagine.

Answer 1

Hmm, questo in realtà non dovrebbe essere troppo difficile da raggiungere. Assicurati che tutti i tuoi elementi siano allineati verticalmente al centro.

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

in anteprima: http://jsfiddle.net/Wexcode/uGuD8/

Con multilinea blocco di testo: http://jsfiddle.net/Wexcode/uGuD8/1/

Con blocco di testo su più righe auto-width : http://jsfiddle.net/Wexcode/uGuD8/11/