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

Question

我正在尝试创建一个编号列表,其中每个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>

有没有跨平台的方式来做这个而不自己提供编号？

编辑.还有一个要求:如果容器宽度非常小(例如,在移动设备上查看时),则文本块必须保持在图像的右侧.图像周围不应该有文字包装.

Answer 1

嗯,这实际上不应该太难实现.只需确保所有元素都垂直对齐到中间.

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/