css：两个行内块元素和图片垂直居中对齐

本文介绍: 一个 inline–block 元素，如果里面没有 inline 内联元素，或者 overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。发现一个很奇怪的现象：我们本来期待的是两个框对齐，表现却是错位的。所以第一个框的底部和后一个元素中的文字基线对齐了，可以看到，默认情况下并没有实现垂直居中对齐。如果两个元素都没有文本，同样是对齐的。发现并没有居中对齐，有种失效的感觉。如果两个元素都有文本，则是对齐的。方案二：图片元素居中对齐。

先看一段代码：

&lt;style&gt;
.box {
    width: 200px;
    height: 200px;
    line-height: 200px;
    font-size: 20px;
    text-align: center;
    display: inline-block;
    background-color: green;
  }
&lt;/style&gt;

<div class="box"&gt;</div>
<div class="box">box</div>

显示效果
在这里插入图片描述
 发现一个很奇怪的现象：我们本来期待的是两个框对齐，表现却是错位的

所以第一个框的底部和后一个元素中的文字基线对齐了，

如果两个元素都有文本，则是对齐的

在这里插入图片描述

.middle {
  vertical-align: middle;
}

<div class="box middle"></div>
<div class="box">box</div>

<div class="box"></div>
<div class="box middle">box</div>

.top {
  vertical-align: top;
}

<div class="box top"></div>
<div class="box">box</div>

<style>
.box {
   background-color: green;
 }
</style>

<div class="box">
 <img class="image" src="./mm.jpg" alt="" />
</div>

.image {
  display: block; 
}

.image {
  vertical-align: middle;
}

.box {
    line-height: 0;
}

.box {
    font-size: 0;
}

<style>
  .box {
    background-color: green;
  }

  .image {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    object-fit: cover;
  }

  .text {
    background-color: red;
    color: #fff;
  }
</style>

<div class="box">
  <img class="image" src="./mm.jpg" alt="" />
  <span class="text">我是一段文字</span>
</div>

<style>
 .box {
   background-color: green;
   
 }
 .image {
   vertical-align: middle;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   object-fit: cover;
 }

 .text {
   background-color: red;
   color: #fff;
   font-size: 12px;
   vertical-align: middle;
 }
</style>

<div class="box">
 <img class="image" src="./mm.jpg" alt="" />
 <span class="text">我是一段文字</span>
</div>