Html CSS：有没有办法在每个列表元素之前垂直对齐数字/项目符号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8283285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: is there a way to vertically align the numbers/bullets before each list element?
提问by dlh
I'm attempting to create a numbered list where each lielement 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:
我正在尝试创建一个编号列表，其中每个li元素都包含一个图像和一个文本块。列表编号、图像和文本块都应沿水平中心线垂直对齐。文本块可以是多行。这是一个非常粗略的说明：
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.
我实现的最接近的是以下内容，它对齐底部的列表编号（在 Chrome 15、Firefox 8、IE9 中测试）。另请参阅jsfiddle 模型。
<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.
编辑。还有一个要求：如果容器宽度非常小（例如，在移动设备上查看时），则文本块必须位于图像的右侧。图像周围不应有文字环绕。
回答by Wex
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:
HTML：
<ol>
<li><img src="widget.png" alt /> <p>Caption Text Here</p></li>
</ol>
CSS:
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; }
Preview: http://jsfiddle.net/Wexcode/uGuD8/
预览：http: //jsfiddle.net/Wexcode/uGuD8/
With multi-line text block: http://jsfiddle.net/Wexcode/uGuD8/1/
带有多行文本块：http: //jsfiddle.net/Wexcode/uGuD8/1/
With auto-width multi-line text block: http://jsfiddle.net/Wexcode/uGuD8/11/
带有自动宽度的多行文本块：http: //jsfiddle.net/Wexcode/uGuD8/11/
