VUE图标与文字对不齐的问题

我使用vue，在右上角显示用户名和图标，代码如下，但图标太靠上，应该与用户名水平中心对齐。该怎么修改代码呢？

    <div class="right-menu" style="padding-right:30px;">
      <img src="@/icons/user.png" style="width:30px; height:30px;alignment: center;">{{ showUserName }}</img>
    </div>

显示效果：

你这个与 VUE 没半毛钱关系。
只是 CSS 方面的问题，加个样式就好：

<div class="right-menu" style="padding-right:30px;">
    你好<img src="https://img-home.csdnimg.cn/images/20201124032511.png" 
      style="width:30px; height:30px;alignment: center;vertical-align:middle;">你好</img>
</div>

把名字写在图片外面吧，用个span标签，
将 .right-menu的css设为
.right-menu{
display:flex;
align-items:center;
}
如有帮助请采纳