Span中图像和文本的垂直对齐

【问题标题】：Vertical-Alignment on Image and Text in SpanSpan中图像和文本的垂直对齐
【发布时间】：2019-06-01 07:58:27
【问题描述】：

我有一个文本和图像垂直对齐完美。

（问题/问题）但我想在它下面放另一行，就像这样......

我尝试将<br\> 放在跨度中，但文本随后直接位于图像下方。

这是第一次垂直对齐的代码。

<img src="/" class="circular" style="vertical-align:middle;">
<span class="text">Text</span>

【问题讨论】：

标签： html css

【解决方案1】：

如果你知道图片的高度，你可以在文字上使用line-height。

看到这个sn-p：

.img {
    float: left;
}
.txt {
    float: left;
    margin: 5px 0 5px 10px;
}
.txt-line {
    line-height: 20px;
}

<div>
    <img class="img" src="http://placehold.it/50x50" />
    <div class="txt">
        <div class="txt-line">Title</div>
        <div class="txt-line">Description</div>
    </div>
</div>

【讨论】：

考虑使用 em 作为单位，而不是 px，如果你改变你的字体大小，你也必须更新你的 line-height。