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/

Answer 2

在这种情况下，要实现您的目标，只需在vertical-align: middle内的div包装器中添加li。
其他所有代码均正确。
这是因为标记（数字或项目符号）绑定到li内的元素，并且与该元素对齐。 div中有li包装器，要对齐标记，只需要对齐此包装器即可。您可以根据需要对齐此包装器中的元素。

<style type="text/css">
    li {
        width: 350px;
    }
    li img {
        margin: 0 12px;
    }
    li div {
        display: inline-block;
        vertical-align: middle;  <!-- I added this line -->
    }
    li div div {
        display: table-cell;
        vertical-align: middle;
    }
</style>

<ol>
    <li>
        <div>
            <div>
                <img src="https://www.gravatar.com/avatar/eaeeab2ea028801c9c4091a10aa2f567?s=64&d=identicon&r=PG" alt />
            </div>
            <div>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa nisl, facilisis vitae sollicitudin a, interdum nec augue. In ut ligula eget lectus vestibulum ullamcorper sit amet et nulla. Nam pellentesque augue quis erat imperdiet adipiscing. Vivamus vitae neque erat. Praesent a dui urna. Praesent fringilla orci sollicitudin lorem ornare quis laoreet elit placerat.
            </div>
        </div>
    </li>
</ol>