Центрировать одно- и многострочный li текст вертикально

Question

У меня есть неупорядоченный список с набором фоновых изображений.Все элементы списка имеют одинаковую высоту, фоновое изображение располагается в левом центре.

Текст каждого элемента должен быть по центру по вертикали относительно li.Это хорошо работает с однострочным текстом (путем установки высоты строки в соответствии с высотой li), но не с двумя строками текста .

Я мог бы добавить "line-height: normal "для двухстрочного элемента, но я хочу решение, которое работает для всех элементов.

Как я могу это сделать?

Пример:

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

Answer 1

это наиболее распространенное решение

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>

Я использовал звездный хак для краткости, вам следует избегать.Просто используйте решение html5boilerplate, оно использует условные комментарии к тегу body

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>

Должно работать.

РЕДАКТИРОВАТЬ: обновлено, чтобы увидеть изменения