css实现图片与文字水平对齐

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；**即可，