Html 将文本底部与图像完全对齐

我有一个侧面显示文本的图像。问题是，较长的字母（如“y”）超过了底部边距，因此图像与文本的整个底部不对齐。下面是一张描述问题的图片：

如何使文本与图像完全对齐

正文{
背景颜色：浅绿色；
}
#线{
宽度：100%；
高度：1px；
背景颜色：橙色；
位置：绝对位置；
顶部：58px；
}
img{
高度：50px；
}
#正文{
显示：内联块；
}

我的短信

添加

垂直对齐：底部至
img
：


正文{
背景颜色：浅绿色；
}
#线{
宽度：100%；
高度：1px；
背景颜色：橙色；
位置：绝对位置；
顶部：58px；
}
img{
高度：50px；
垂直对齐：底部对齐；
}
#正文{
显示：内联块；
}

我的短信
Flexbox让这变得很容易


正文{
背景颜色：浅绿色；
}
#线{
宽度：100%；
高度：1px；
背景颜色：橙色；
位置：绝对位置；
顶部：58px；
}
img{
高度：50px；
}
#正文{
/*显示：内联块*/
}
.集装箱{
显示器：flex；
对齐项目：柔性端；
}

我的短信
您需要为texty设置底部填充和垂直对齐：


正文{
背景颜色：浅绿色；
}
#线{
宽度：100%；
高度：1px；
背景颜色：橙色；
位置：绝对位置；
顶部：58px；
}
img{
高度：50px；
}
#正文{
显示：内联块；
垂直对齐：文本底部；
垫底：3件；
}

我的短信
对于特定字体，这感觉相当特殊