html - 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/