Texto central y multilínea li texto verticalmente

Question

Tengo una lista desordenada con un conjunto de imágenes de fondo. Todos los elementos de la lista tienen la misma altura, la imagen de fondo está ubicada en el centro izquierdo.

El texto de cada elemento debe ser centrado verticalmente al li. Esto funciona bien con texto de una sola línea (al establecer la altura de la línea de acuerdo con la altura de la li), pero no con dos líneas de texto.

Podría agregar "line-height: normal" al artículo de dos líneas, pero quiero una solución que funcione para todos los artículos.

¿Cómo puedo hacer esto?

Ejemplo:

li { 
    list-style-type:none; 
    padding-left:40px; 
    height:36px; 
    line-height:36px; 
    background:url('tick.png') no-repeat 0 50%; 
} 

Answer 1

esta es una solución más crossbrowser

li { 
    width   : 200px; 
    line-height  : 100px; 
    height   : 100px; 
    border   : 1px blue solid;   
} 
li span { 
    display    : -moz-inline-box; /* FF2 or lower */ 
    display    : inline-block;  /* FF3, Opera, Safari */ 
    line-height   : normal; 
    vertical-align  : middle;  
} 

li span  { *display : inline;} /* haslayout for IE6/7 */ 

html

<ul> 
    <li><span>My text</span></li> 
    <li><span>My longer text</span></li> 
    <li><span>My text, but this time is really wide</span></li> 
    <li><span>My text, some thoughts about how much it will expand in this item.</span></li> 
</ul> 

Solía ​​estrellas piratear por razones de brevedad, se debe evitar. Solo use la solución html5boilerplate, usa comentarios condicionales en la etiqueta del cuerpo

Answer 2

li { 
    height:200px; 
    line-height:200px; 
    border:1px solid red; 
} 
li span { 
    vertical-align:middle; 
    display:inline-block; 
    line-height:1.2; 
} 

<li> 
    <span>two<br />lines</span> 
</li> 

Se debe trabajar.

EDIT: actualizado para ver los cambios