Html CSS：有没有办法在每个列表元素之前垂直对齐数字/项目符号？

我试图创建一个编号列表，其中每个

li

元素包含一个图像和一个文本块。列表编号、图像和文本块都应沿水平中心线垂直对齐。文本块可以是多行。下面是一个非常粗略的说明：

我所取得的最接近的结果如下，它与底部的列表编号对齐（在Chrome15、Firefox8、IE9中测试）。另见

li div{显示：内联块}
li div div{显示：表格单元格；垂直对齐：中间}
标题文本在这里

有没有一种跨平台的方法可以在不提供编号的情况下实现这一点

---

编辑。还有一个要求：如果容器宽度非常小（例如，在移动设备上查看时），则文本块必须位于图像的右侧。图像周围不应该有文本包装。

嗯，这实际上应该不太难实现。只需确保所有元素都与中间垂直对齐即可

HTML:

预览：

使用多行文本块：

---

使用自动宽度多行文本块：

在这种情况下，要实现您的目标，您只需将

垂直对齐：中间

添加到

div

包装中

li

所有其他代码都是正确的。
这是因为标记（数字或项目符号）绑定到

li

中的元素，并与该元素对齐。在

li

中有

div

包装，要对齐标记，只需对齐此包装。您可以根据需要对齐此包装器中的元素

李{
宽度：350px；
}
李英明{
边际：0.12px；
}
李迪夫{
显示：内联块；
垂直对齐：中间对齐；
}
李迪夫{
显示：表格单元格；
垂直对齐：中间对齐；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一种全新的生活方式，也是一种全新的生活方式。在我们的前庭舌苔中，乌兰科佩尔坐在那里。纳姆·佩伦茨克·奥古斯·奎斯·埃拉特·阿迪皮辛。万岁。在酒后驾车。奥纳·奎斯·劳里特精英学院。

非常感谢您的回复，但这并不能满足多行文本框的要求。实际上，这只是一个小改动。。。仍然使用

垂直对齐：中间但如果文本块的宽度超过父容器中的宽度，则整个文本块将呈现在图像下方。我希望文本保持在图像的右侧，而不考虑容器的宽度。如果文本块大于容器中一行的大小，您希望看到什么情况？滚动还是仅仅溢出容器？尽管说实话，您可能希望文本框足够小，以适合容器。理想情况下，文本应根据容器宽度动态换行。只有当容器太小，无法容纳最长的单个单词时，才需要水平滚动。上面的原始CSS具有此行为（但它还有其他问题）：
<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>

<ol>
    <li><img src="widget.png" alt /> <p>Caption Text Here</p></li>
</ol>    

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