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

Posted 2023-03-04

【中文标题】CSS：有没有办法在每个列表元素之前垂直对齐数字/项目符号？

【英文标题】：CSS: is there a way to vertically align the numbers/bullets before each list element?

【发布时间】：2012-01-07 04:06:01

【问题描述】：

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

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

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

【参考方案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/

【讨论】：

非常感谢您的回复，但这不满足多行文本框的要求。

真的只是一个小改动...仍在使用vertical-align: middle;jsfiddle.net/Wexcode/uGuD8/1

但是如果你的文本块比父容器的宽度宽，整个文本块将被渲染到图像下方。无论容器宽度如何，我都希望文本保持在图像的右侧。

如果文本块大于容器中一行的大小，您希望看到什么情况？滚动或只是溢出容器？虽然老实说，您可能希望文本框足够小以放入容器中。

理想情况下，文本应该根据容器宽度动态换行。仅当容器太小而无法容纳最长的单个单词时，才需要水平滚动。上面的原始 CSS 有这种行为（但它有其他问题）：jsfiddle.net/uGuD8/10

【参考方案2】：

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

<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>