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

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

原文地址：https://www.jb51.cc/html/230611.html