CSS: is there a way to vertically align the numbers/bullets before each list element?

Question

I'm attempting to create a numbered list where each li element contains an image and a text block. The list-number, image and text block should all be vertically aligned along a horizontal center-line. The text block could be multiple lines. Here's a very rough illustration:

The closest I've achieved is the following, which aligns the list-number at the bottom (tested in Chrome 15, Firefox 8, IE9). See also 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>

Is there a cross-platform way of doing this without supplying the numbering myself?

Edit. One more requirement: if the container-width is very small (e.g., when viewed on a mobile device), then the text-block must stay to the right of the image. There should be no text-wraping around the image.

Answer 1

Hmm, this actually shouldn't be too difficult to achieve. Just make sure that all of your elements are vertically-aligned to the middle.

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

Preview: http://jsfiddle.net/Wexcode/uGuD8/

With multi-line text block: http://jsfiddle.net/Wexcode/uGuD8/1/

With auto-width multi-line text block: http://jsfiddle.net/Wexcode/uGuD8/11/

Answer 2

In this case, to achieve your goal you only need to add vertical-align: middle to the div wrapper inside the li.
All other code is correct.
This is because a marker (number or bullet) is bound to the element inside the li and it aligns with this element. You have the div wrapper in the li and to align marker you only need to align this wrapper. The elements inside this wrapper you can align as you need.

<style type="text/css">
    li {
        width: 350px;
    }
    li img {
        margin: 0 12px;
    }
    li div {
        display: inline-block;
        vertical-align: middle;  <!-- I added this line -->
    }
    li div div {
        display: table-cell;
        vertical-align: middle;
    }
</style>

<ol>
    <li>
        <div>
            <div>
                <img src="https://www.gravatar.com/avatar/eaeeab2ea028801c9c4091a10aa2f567?s=64&d=identicon&r=PG" alt />
            </div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa nisl, facilisis vitae sollicitudin a, interdum nec augue. In ut ligula eget lectus vestibulum ullamcorper sit amet et nulla. Nam pellentesque augue quis erat imperdiet adipiscing. Vivamus vitae neque erat. Praesent a dui urna. Praesent fringilla orci sollicitudin lorem ornare quis laoreet elit placerat.
            </div>
        </div>
    </li>
</ol>