CSS: есть ли способ вертикально выровнять числа/маркеры перед каждым элементом списка?

Я пытаюсь создать нумерованный список, в котором каждый элемент li содержит изображение и текстовый блок. Строка списка, изображение и текст должны быть выровнены по горизонтали вдоль горизонтальной центральной линии. Текстовым блоком может быть несколько строк. Здесь очень грубая иллюстрация:

Самое близкое, что я достиг, это следующее, которое выравнивает номер списка внизу (тестируется в Chrome 15, Firefox 8, IE9). См. Также 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>

Есть ли кросс-платформенный способ сделать это без предоставления нумерации?

Edit. Еще одно требование: если ширина контейнера очень мала (например, при просмотре на мобильном устройстве), текстовый блок должен оставаться справа от изображения. Не должно быть текстурирования вокруг изображения.

Ответ 1