Css 当文本下降到两行时，垂直对齐中间的图标

我有一个图标，我正在使用flexbox垂直对齐在容器中间。。。。看起来像这样

但是当移到小屏幕上时，当文本下降到两行时，图像没有垂直对齐到我想要的位置：

<>我希望它只在中间文本的最后一行垂直对齐，而不是在两行文本的中间垂直对齐。这是我想要的结果，信息图标与“here”内联并位于中间：

我如何才能做到这一点

。卡片标题{
填充：30px 20px 10px；
显示器：flex；
字体大小：50px；
}
钮扣{
背景：无；
边界：无；
对齐项目：居中；
}
按钮式img{
高度：30px；
}

---

此处的内容

您可以将图像和文本的类别向左浮动，使它们根据需要对齐。。。i、 e.卡片标题和信息图像的类别。只需写

float:left
您需要更改元素结构，如下所示。您需要在
位置：绝对
的帮助下，相对于最新的父span元素（此处为
）定位按钮


。卡片标题{
/*填充：30px 20px 10px；删除额外的填充以适应单屏幕中的两个版本，一个不需要滚动*/
显示器：flex；
字体大小：50px；
}
跨度{
位置：相对位置；
}
钮扣{
位置：绝对位置；
背景：无；
边界：无；
对齐项目：居中；
右：0；
最高：50%；
转换：翻译（100%，-50%）；
}
按钮式img{
高度：30px；
}
.演示-2{
最大宽度：200px；/*实验目的*/
}

满足于
在这里
满足于
在这里
我冒昧地对HTML标记做了一些更改，而不是使用h2作为父元素，我决定使用div，并将h2和img标记放在其中

例如：

这并不保持图标垂直对齐在文本浮点的中间，它让我把图像定位在内容的旁边。跨度中的内容是动态的，因此我不能手动地在另一个跨度中添加底部文本，有时它落到两行，有时它不…因此，我正在寻找一种兼顾这两者的解决方案：在中间位置不保持垂直对齐的FlexUse
vertical align:Xpx并按照您的意愿调整X这仍然会将图标一直显示在右侧，而不是“此处”旁边。当您仅用鼠标缩小浏览器，而不使用真正的移动屏幕时，您实际上看不到“真正的东西”。我使用Firefox进行了测试，进入了“移动屏幕视图”CMD+SHIFT+Mokay。。。。这段代码也总是假设文本将在手机上下拉到另一行。。。。内容是动态的，所以有时它不会下降到两行，这意味着在这种情况下，图标不再垂直对齐在中间…当内容仅为一行时，它显示得太低
    <div class="card-heading">
        <h2> CONTENT IN HERE </h2> <img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png">
    </div>

            .card-heading {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 50px;
                height: auto;
                width: 100%;
                border: 1px solid black;
            }

            button {
                background: none;
                border: none;
            }

            img {
                height: 30px;
                width: 30px;
                position: absolute;
                right: 21px;
                padding-top: 55px;
            }
        @media screen and (min-width: 768px) {
            .card-heading {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                font-size: 50px;
                height: auto;
                border: 1px solid black;
            }
            button {
                background: none;
                border: none;
            }

            img {
                height: 30px;
                width: 30px;
                position: relative;
                padding: 0;
                right: 0;
            }
        }
    ```