vertical-align在flex布局下失效的问题

想要一个图片和文字横向排列时首先想到用flex布局，但是文字老是在图片的顶端对齐显示，非常的不人性，这时使用vertical-align:middle结果不生效。这时候在文字标签里面加上这两个style属性。

display:flex;

align-items:center;

<span
      style="

            display: flex;
            align-items: center;
            
            margin-left: 10px;
            width: 140px;
            word-wrap: break-word;
            word-break: break-all;
            "
        >
        {{ item.name }}
</span>

再试试看，发现可以了。

 修改前后对比