我正在尝试创建一个编号列表,其中每个li元素包含图像和文本块.列表号,图像和文本块都应沿水平中心线垂直对齐.文本块可以是多行.这是一个很粗略的例子：
我最接近的是以下内容,它将底部的列表编号对齐(在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>
在不提供编号的情况下,是否有跨平台的方式？
编辑.另一个要求：如果容器宽度非常小(例如,当在移动设备上观看时),则文本块必须保留在图像的右侧.图像周围不应该有文字包装.
解决方法
嗯,这实际上不应该太难以实现.只要确保所有的元素与中间垂直对齐.
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/
