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

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

<style>
    .wrap2 {
        width: 500px;
        margin: 50px auto;
        background: coral;
      }
    .wrap2 img {
        width: 100px;
    }
</style>

<div class="wrap2">
   <img src="./cat.jpg" alt="" />
   <span>xibing</span>
</div>

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

文本内容增多后： 

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

<style>
    .wrap2 {
        width: 500px;
        margin: 50px auto;
        background: coral;
      }
    .wrap2 img {
        width: 100px;
        /*只给图片设置*/
        vertical-align: middle;
    }
</style>

<div class="wrap2">
   <img src="./cat.jpg" alt="" />
   <span>xibing</span>
</div>

 文本内容增多后：

---

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

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

<style>
    .wrap2 {
        width: 500px;
        margin: 50px auto;
        background: coral;
      }
    .wrap2 img {
        width: 100px;
        vertical-align: middle;
    }
    .wrap2 span{
        display: inline-block;
        width: 380px;
        vertical-align: middle;
        border: 1px dashed #fff;
    }
</style>

<div class="wrap2">
   <img src="./cat.jpg" alt="" />
   <span>xibing xibing xibing xibing xibing xibing xibing xibing xibing</span>
</div>

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

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

<style>
    .wrap2 {
        width: 500px;
        margin: 50px auto;
        background: coral;
      }
    .wrap2 img {
        width: 100px;
        vertical-align: middle;
    }
    .wrap2 span{
        display: inline-block;
        width: 380px;
        vertical-align: middle;
        border: 1px dashed #fff;
        overflow-wrap: anywhere;
    }
</style>

<div class="wrap2">
   <img src="./cat.jpg" alt="" />
   <span>xibingxibingxibingxibingxibingxibingxibingxibingxibing</span>
</div>

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

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

<style>
    .wrap2 {
        width: 500px;
        height:200px;
        /*行高等于高---让内部元素垂直居中*/
        line-height:200px;
        margin: 50px auto;
        background: coral;
      }
    .wrap2 img {
        width: 100px;
        vertical-align: middle;
    }
    .wrap2 span{
        display: inline-block;
        width: 380px;
        vertical-align: middle;
        border: 1px dashed #fff;
        overflow-wrap: anywhere;
    }
</style>

<div class="wrap2">
   <img src="./cat.jpg" alt="" />
   <span>xibing</span>
</div>

如果是单行文本，不会换行，则按照父级的行高会垂直方向居中对齐
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调小即可解决该问题

<style>
    .wrap2 {
        width: 500px;
        /*给父级把行高调小*/
        line-height:12px;
        margin: 50px auto;
        background: coral;
      }
    .wrap2 img {
        width: 100px;
        vertical-align: bottom;
    }
    .wrap2 span{
        display: inline-block;
        width: 380px;
        border: 1px dashed #fff;
    }
</style>

<div class="wrap2">
   <img src="./cat.jpg" alt="" />
   <span>xibingxibingxibingxibing</span>
</div>

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

解决办法：

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

<div class="wrap2">
   <img src="./cat.jpg" alt="" /><span>xibingxibingxibingxibing</span>
</div>

        方法二：父级font-size:0

<style>
    .wrap2 {
        width: 500px;
        /*给父级把行高调小*/
        line-height:12px;
        margin: 50px auto;
        background: coral;
        /*设置font-size:0来让空字符隐藏不占位*/
        font-size:0px;
      }
    .wrap2 img {
        width: 100px;
        vertical-align: bottom;
    }
    .wrap2 span{
        display: inline-block;
        width: 380px;
        border: 1px dashed #fff;
        /*避免继承父级font-size为0的影响，这里要给一个字体大小才能让文本显示*/
        font-size:16px;
    }
</style>

<div class="wrap2">
   <img src="./cat.jpg" alt="" />
   <span>xibingxibingxibingxibing</span>
</div>