div中内部的对象居中对齐，文字标签最多显示两行，长度不足则垂直居中
Tags: /计算机文档/网页制作/
Date Created:
一个DIV内部，有一个 img，一个span，我希望他们居中对齐，span如果文字很短，就和img垂直居中，且文字垂直居中对齐，如果文本很长，就最多显示2行，并且和img垂直居中对齐。
<style>
.text {
display: -webkit-box; /* 关键：启用多行文本截断 */
-webkit-line-clamp: 2; /* 最多显示 2 行 */
-webkit-box-orient: vertical;
overflow: hidden; /* 超出部分隐藏 */
}
</style>
<div style="height:2*1.2em;display:flex; align-items:center; gap:5px">
<img width="40" height="40" src="https://img.icons8.com/?size=100&id=9dZyCrf02LRh&format=png&color=000000">
<span class="text" style="width: 200px">短内容</span>
<span class="text">这里是文本内容，可能很短也可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长,可能很短也可能很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长，要实现这个效果，可以使用 Flexbox 布局 结合 文本截断（line-clamp） 来控制文本显示，同时保持整体垂直居中。
</span>
</div>