CSS：有办法在每个列表元素之前垂直对齐数字/项目符号吗？ [英] CSS: is there a way to vertically align the numbers/bullets before each list element?

问题描述

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

I'm attempting to create a numbered list where each li element contains an image and a text block. The list-number, image and text block should all be vertically aligned along a horizontal center-line. The text block could be multiple lines. Here's a very rough illustration:

我已经实现的最接近的是以下，它列出底部的列表编号（在Chrome 15，Firefox 8，IE9测试）。另请参见 jsfiddle mockup 。

The closest I've achieved is the following, which aligns the list-number at the bottom (tested in Chrome 15, Firefox 8, IE9). See also 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>

有没有跨平台的方式，而不自己提供编号？

Is there a cross-platform way of doing this without supplying the numbering myself?

编辑。还有一个要求：如果容器宽度非常小（例如，当在移动设备上观看时），则文本块必须保持在图像的右边。

Edit. One more requirement: if the container-width is very small (e.g., when viewed on a mobile device), then the text-block must stay to the right of the image. There should be no text-wraping around the image.

推荐答案

嗯，这其实不应该太难实现。

Hmm, this actually shouldn't be too difficult to achieve. Just make sure that all of your elements are vertically-aligned to the middle.

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/

With auto-width multi-line text block: http://jsfiddle.net/Wexcode/uGuD8/11/

这篇关于CSS：有办法在每个列表元素之前垂直对齐数字/项目符号吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！