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

Question

我正在尝试创建一个编号列表，其中每个 li 元素都包含一个图像和一个文本 block 。列表编号、图像和文本 block 都应沿水平中心线垂直对齐。文本 block 可以是多行。这是一个非常粗略的例子:

我最接近的是下面的，它与底部的列表编号对齐(在 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>

是否有一种跨平台的方法可以在不自己提供编号的情况下执行此操作？

编辑。还有一个要求:如果容器宽度非常小(例如，在移动设备上查看时)，那么文本 block 必须位于图像的右侧。图片周围不应有文字环绕。

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/

多行文本 block :http://jsfiddle.net/Wexcode/uGuD8/1/

使用自动宽度多行文本 block :http://jsfiddle.net/Wexcode/uGuD8/11/