HTML/CSS卡片中图标与文本垂直对齐问题求助

我用HTML和CSS制作卡片，卡片底部设有两个图标，分别居左和居右。图标显示正常，但配套文本无法与图标垂直居中对齐。

现有代码 #

HTML

<div class="info-content">
    <div class="info left">
        <img src="./img/icon-ethereum.svg" alt=""><span class="text-info">0.041 ETH</span>
    </div>
    <div class="info right">
        <img src="./img/icon-clock.svg" alt=""><span class="text-info">3 days left</span>
    </div>
</div>

CSS

.info-content {
    display: flex;
    margin: 0px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: .7rem;
}

.info {
    vertical-align: middle;
    margin-bottom: 5px;
}

解决方案 #

方法1：给.info容器启用Flex布局

这是最通用的方案，把每个.info变成flex容器，通过align-items: center让内部元素自动垂直居中，还能顺便给图标和文本加间距。

修改后的CSS：

.info-content {
    display: flex;
    margin: 0px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: .7rem;
}

.info {
    display: flex;
    align-items: center;
    gap: 6px; /* 可选：调整图标与文本的间距 */
    margin-bottom: 5px;
}

方法2：直接给图标设置vertical-align: middle

如果不想用Flex，直接给图标添加vertical-align: middle属性，让它和文本的基线对齐，就能实现居中。

修改后的CSS：

.info-content {
    display: flex;
    margin: 0px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: .7rem;
}

.info {
    margin-bottom: 5px;
}

.info img {
    vertical-align: middle;
}

方法3：用行高统一对齐（适合固定高度的图标）

如果图标高度固定，给.info设置和图标高度一致的行高，再配合图标垂直对齐，也能达到效果。假设图标高度为16px：

.info-content {
    display: flex;
    margin: 0px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: .7rem;
}

.info {
    line-height: 16px;
    margin-bottom: 5px;
}

.info img {
    height: 16px;
    vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者Augusto Faggion