css实现图片和文字水平居中对齐

      <div class="funbtnitem">
        <img src="../../assets/img/shenhe.png" alt="">
        <span>修改</span>
      </div>

一、通过vertical-align:middle实现现图片与文字水平对齐，需要区分html是行内元素，还是块状元素；例如：标签img、span是行内元素；标签p是块状元素则需要将标签p通过diaplay:inline-block;转化为行内元素；

1、实现img、p及div水平居中对齐，则只需要在img的css中的vertical-align：middle；及将p和div（display：inline-block）转化为行内元素；

2、实现img、span水平居中对齐，由于这两者都是行内元素；则只需要在img的css中的vertical-align：middle；span标签什么都不需要添加；

.funbtnitme { margin-right: 10px; font-size: 13px;
} .funbtnitme img { width: 15px; height: 15px; vertical-align:middle;
}

二、通过flex布局实现图片与文字水平对齐

只需要在父级元素中css添加：

display:flex;

flex-direction:row;

align-items:center;

子级元素则不需要像上面那样添加vertical-align：middle；

.funbtnitme { margin-right: 10px; font-size: 13px; text-align: center; display: flex; flex-direction: row; align-items: center;
} .funbtnitme img { width: 15px; height: 15px;
}