title: CSS: is there a way to vertically align the numbers/bullets before each list element?
body: <p>I'm attempting to create a numbered list where each <code>li</code> 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: </p>
  
  <p><img src="https://i.stack.imgur.com/fYagU.png" alt="vertical alignment example"></p>
  
  <p>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 <a href="http://jsfiddle.net/uGuD8/10/" rel="noreferrer" title="jsfiddle">jsfiddle mockup</a>.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      li div { display: inline-block }
      li div div { display: table-cell; vertical-align: middle }
  &lt;/style&gt;
  
  &lt;ol&gt;
  &lt;li&gt;&lt;div&gt;&lt;div&gt;&lt;img src=widget.png&gt;&lt;/div&gt;&lt;div&gt;Caption Text Here&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>Is there a cross-platform way of doing this without supplying the numbering myself?</p>
  
  <p><strong>Edit</strong>. 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.</p>