如何实现以上的图片和文字的垂直居中效果
先说思路再贴出代码，最后会说明原理
思路：
1. 将父元素的 font-size 设置为 0，使得基线位于垂直的正中间
2. 父元素内的行内元素设置 vertical-align: middle
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<style>
div {
background-color: lightgreen;
font-size: 0;
width: fit-content;
padding: 3px;
border-radius: 5px;
}
.word {
font-size: 18px;
vertical-align: middle;
}
img {
width: 20px;
height: 20px;
border-radius: 100%;
vertical-align: middle;
margin-right: 8px;
}
</style>
</head>
<body>
<div>
<img src="https://images.unsplash.com/photo-1621839673705-6617adf9e890?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80">
<span class="word">朋友，好久不见！</span>
</div>
</body>
</html>
说说原理：
实际上你给文字设置的 font_size 和实际上显示的大小不一定相同，因为 font-size 是一个无形的框，我们无法看到，比如这个示例，我们给 span 的文字设置是 18px 实际上显示大小为23.73
这是默认的微软雅黑显示的大小，如果是其他字体还会有不同，这是有因为设计字体时候为了视觉更好，每种字体的防止的上下左右的位置都有不同，而不是全都是正中间的。
他们实际是按照字母 x 去作为基线的，而设计 x 字体时候，他就是偏靠下一些的，所以我们经常使用 vertical-align: middle 总觉得不是真正的中间的疑惑就是这里
所以我们应该将父元素的 font_size 设为 0，这样才能真正的是垂直方向的中间
