使用vertical-align:middle将文字与图片水平垂直居中

属性说明：

行内元素垂直方向的对齐方式。

属性值有：baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit

html代码如下：

 <div class="userName">
        <img src="./head_portrait.png" alt="头像"/>
        <span class="roleName">管理员</span>
</div>

CSS代码如下：

说明我这里使用的是scss预处理语言

@mixin diamond{
    width: 170px;
    height: 53px;
    background: linear-gradient(180deg, rgb(5, 34, 91) 0%, rgba(14, 95, 255, 1) 100%);
  }
.userName{
     //clip-path是用来切割块元素，我这里将div切割成一个菱形
     clip-path: polygon(25% 0,100% 0,75% 100%,0 100%);
     @include diamond()
     //要设置 line-height，如果没设置则会导致图片和文字在统一水平线，但没垂直居中在div中
      line-height: 53px;
      margin-right:-20px;
      margin-left: 5px;
      img{
        vertical-align:middle;
      }
    }

没设置 line-height：center情况

设置 line-height：center情况

还有另外一种方法设置文字图片垂直居中，就是使用背景图方式

将img的图片设置成背景图，设置背景图的background-size，并且设置不重复，最后给文字设置个padding-left也是ok的，但是还是得记得设置 line-height：center！！！