一、通过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标签什么都不需要添加；

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

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

display:flex;

flex-direction:row;

align-items:center;

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