1、功能说明

  图片与文字水平对齐是经常遇到的场景，若使用普通inline或者inline-block布局方式，往往需要通过调整边距来实现图片文字水平对齐，下面我们通过flex布局实现下图功能：

2、功能实现

  实现该功能其实就是flex布局的应用，使用flex布局的***align-item***属性即可，该属性说明如下：
align-items属性定义项目在交叉轴上如何对齐，取值如下：

• flex-start： 左上对齐
• flex-end ：左下对齐
• center ：中间对齐
• stretch：未设高度时占满容器高度
• baseline：盒子内第一行文字基线对齐

这里我们实现水平对齐功能使用的的属性是***align-items：center ；***代码如下：

// html
<div class="three-img">
  <div>
     <img :src="require('@/assets/images/imgRowAlign/image .png')" />
     <span>我是图片</span>
   </div>
   <div>
     <img :src="require('@/assets/images/imgRowAlign/image .png')" />
     <span>我是图片</span>
   </div>
   <div>
     <img :src="require('@/assets/images/imgRowAlign/image .png')" />
     <span>我是图片</span>
   </div>
 </div>
// css
<style lang="scss" scoped>
.three-img {
  margin-top: 40px;  
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  img {
    width: 20px;
    height: 20px;
  }
  span {
    margin-left: 5px;
  }
}
</style>

若要实现文字与图片底部对齐，使用**align-items：flex-end；**即可，

方式一、vertical-align:middle

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

CSS vertical-align 属性

定义和用法
vertical-align 属性设置元素的垂直对齐方式。

说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

浏览器支持
所有浏览器都支持 vertical-align 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

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

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

display:flex;

flex-direction:row;

align-items:center;

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

区别

vertical-align:middle 与flex布局处理图片与文字水平居中对齐的区别；前者只要针对标签比较少的，及css的内用是写在子级的；后者针对需要实现很多标签水平居中对齐比较方便，及css主要写在父级上；

前言

父元素

display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
height: 92rpx;
line-height: 1;

图片：

文字：