设置了align-items:center，但是无法垂直居中？

Question

如题

具体HTML结构描述：

<div class='wrapper'>
  <span>电话号码：</span>
  <img scr='电话图标' />
  <span class='font-blue'>86908690</span>
</div>

给wrapper设置了flex布局和align-items:center，照理说应该是居中对齐的，但是img始终偏下一点点，而两侧的文本对齐了。

之后换了种方式，不设置flex，直接给子元素设置vertical-align: center，那么所有子元素都正好垂直居中对齐了。

问题是解决了，但是我就是疑惑在为什么使用flex布局的时候不能垂直居中对齐，img会偏下呢

Answer 1

<picture class="mr-2" style="
    display: flex;
    align-items: center;
">
    <span>123</span>                                        
    <img class="d-inline-block rounded-circle 
        aria-hidden="true" itemprop="image" "width="32" 
        style="display: inline;"
        src="https://avatar-static.ostack.cn/653/292/653292003-5d6cd4f357bfc_big64">
    <span>123</span>
</picture>

我拿这个页面中你的头像改造的，效果没问题
开 F12 查一下是不是 img 元素有 margin, padding 或者 定位属性，
vertical-align, text-align 测了一下也没有问题额样子