一个DIV内部,有一个 img,一个span,我希望他们居中对齐,span如果文字很短,就和img垂直居中,且文字垂直居中对齐,如果文本很长,就最多显示2行,并且和img垂直居中对齐。
<style>
.text {
display: -webkit-box;
-webkit-line-clamp: 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>