Html 如何将图像和文本与显示：内联块垂直对齐？

我正试图在HTML/CSS中的文本之间创建一个合适的图标

这似乎可以通过

display:inline块实现。但是，由于幻影填充，这似乎总是出错：


此处文本


如您所见，外部div变为25.64px高，而它的两个子元素都是24px高

此外，图像在底部对齐，而文本在外部div的顶部对齐

但是，我希望它们都垂直（中心）对齐

如果我试图强制外部div为24px：
，内容将保持不正确的对齐，图标只会溢出到其父级下方


所以我想我的问题是：

如果图像与文本的高度相同，或者两者都是垂直居中对齐的，如何使图像很好地适合文本行？我可以尝试一种更面向css的方法。我在下面举了一个小例子


.btnStyle{
位置：相对位置；
显示：内联flex；
宽度：110px；
高度：24px；
文本对齐：左对齐；
字体系列：Helvetica，无衬线；
颜色：黑色；
背景图片：url(https://extortionguild.com/images/icon-unsorted.png);
背景尺寸：17.5px100%；
背景位置：右中；
背景重复：无重复；
右边距：20px；
}
桌子{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：计算（100%-20px）；
字号：18px；
}
表td{
垂直对齐：中间对齐；
}

此处文本
此处文本
这里有更多的文字
尝试将
放在文本的
内，使两个子元素垂直居中对齐。您可以使用display:flex而不是inline block尝试强制外部div高度：24px和img最大高度：100%感谢您的回复！在您发送的文档链接中，我发现：
verticalalign:text-bottom如果图像与文本的高度相同，则该选项似乎有效！
<div style="">
    <div style="display:inline-block;">Text here</div><img style="height:24px;display:inline-block" src="{{ url_for('static', filename= 'images/icon-unsorted.png' ) }}" />
</div>