图片和文字同行垂直居中、对齐问题

1、图片和文字内容（不设置对齐方式）

   
   xibing

该情况下，内容和图片呈基线对齐——字母x的下边  

文本内容增多后： 

 2、图片和文字内容（设置垂直居中对齐）父级高度不固定

   
   xibing

 文本内容增多后：

---

让多行文本内容都呈现垂直居中，可以给文本设置【宽度+vertical-align:middle】

其中宽度+图片宽度<父级宽度即可（给span设置宽度避免不了给它设置转行内块）

   
   xibing xibing xibing xibing xibing xibing xibing xibing xibing

 这里还有个有趣的地方，现在咱们的词之间有距离，如果各个贴合就不会换行

 为了避免这种情况，我们可以加上【超出换行overflow-wrap: anywhere;】

   
   xibingxibingxibingxibingxibingxibingxibingxibingxibing

3、图片和文字内容（设置垂直居中对齐）父级高度固定

可以设置父级：行高等于高来实现内部子元素垂直居中对齐

   
   xibing

如果是单行文本，不会换行，则按照父级的行高会垂直方向居中对齐
But,如果是多行文本，还想要垂直居中对齐，就得给再设置一下自己文本的行高，以覆盖继承的父级行高，实现自己管理管理自己行高

.wrap2 span{
    display: inline-block;
    border: 1px dashed #fff;
    width: 380px;
    /*设置行高，以控制自己内部文本内容的行高*/
    line-height: 42px;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

 4、图片/文字和父级底部间隔问题

看了几篇文章，解决方案是处理vertical-align或line-height

处理vertical-align：

        内联元素的vertical-align默认是baseline，基线对齐；让vertical-align:baseline失效即可！

        方法1：将内联元素转换为块元素，vertical-align对块级元素不生效（display: block;）

        方法2：不使用默认的基线对齐方式（vertical-align: bottom/middle/top;）

 对于文字底部的距离可以处理line-height：

将父级的line-height调小即可解决该问题

   
   xibingxibingxibingxibing

我们还会注意到一个空隙——图片和文字之间的空隙：

解决办法：

        方法一：让实际代码中的img标签和span标签紧贴；

   xibingxibingxibingxibing

        方法二：父级font-size:0

   
   xibingxibingxibingxibing