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

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

vertical alignment example

Самое близкое, что я достиг, это следующее, которое выравнивает номер списка внизу (тестируется в 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

Хм, этого на самом деле не должно быть слишком сложно достичь. Просто убедитесь, что все ваши элементы выровнены по вертикали до середины.

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

Предварительный просмотр: http://jsfiddle.net/Wexcode/uGuD8/

С многострочным текстовым блоком: http://jsfiddle.net/Wexcode/uGuD8/1/

С многострочным текстовым блоком автоматической ширины: http://jsfiddle.net/Wexcode/uGuD8/11/