Однострочный и многострочный текстовый текст по вертикали

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

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

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

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

Пример:

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

Ответ 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

Ответ 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>

Он должен работать.

EDIT: обновлено, чтобы увидеть изменения