尽管使用了 display:flex，为什么这两个元素垂直偏移？

我希望文本和图标都完美地垂直居中，如下所示：

这就是为什么我使用display:flexwithalign-items:center但我得到的是：

代码

注意：我使用的是 React，所以请注意内联样式 :-)

<div style="background-color:#999;position:fixed;width:100%;height:52px;box-shadow:0 -12px 27px #999;display:flex;align-items:center">
   <div style="flex:1;height:24px;margin-left:20px">
      <div style="display:inline-block;width:24px;height:24px;border: 1px solid green;">
         <img style="width:100%;height:100%;border:0" src="https://t3.ftcdn.net/jpg/00/63/33/38/240_F_63333813_qO48nGh5uFZ0EVkCYS3ZehhrR10dWg4D.jpg" alt="Logo">
      </div>
      <h1 style="display:inline-block;margin:0;text-transform:uppercase;font-family:Raleway, serif;font-weight:900;font-size:18px;height:24px;border: 1px solid red;">MyLogo</h1>
   </div>
</div>

钢笔

https://codepen.io/valnub/pen/XzxOvY

怎么了？我不明白:-( 请帮助我，哦强大的 flexbox css 大师！