CSS: ¿hay alguna manera de alinear verticalmente los números/viñetas antes de cada elemento de la lista?

Question

Estoy intentando crear una lista numerada donde cada elemento li contiene una imagen y un bloque de texto. El número de lista, la imagen y el bloque de texto deben estar alineados verticalmente a lo largo de una línea central horizontal. El bloque de texto podría ser varias líneas. He aquí un ejemplo muy áspera:

Lo más cerca que he logrado es el siguiente, que se alinea la lista de números en la parte inferior (probado en Chrome 15, Firefox 8, IE9). Consulte también 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> 

¿Existe una forma multiplataforma de hacer esto sin proporcionar la numeración?

Editar. Un requisito más: si el ancho del contenedor es muy pequeño (por ejemplo, cuando se ve en un dispositivo móvil), entonces el bloque de texto debe permanecer a la derecha de la imagen. No debería haber texto ensombrecido alrededor de la imagen.

Answer 1

Hmm, esto realmente no debería ser demasiado difícil de lograr. Solo asegúrate de que todos tus elementos estén alineados verticalmente en el medio.

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

Vista previa: http://jsfiddle.net/Wexcode/uGuD8/

Con multilínea bloque de texto: http://jsfiddle.net/Wexcode/uGuD8/1/

Con bloque de texto de varias líneas de auto-ancho : http://jsfiddle.net/Wexcode/uGuD8/11/