<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
width: 350px;
height: 200px;
background-color: red;
margin: 20px;
text-align: center;
line-height: 200px;
}
span{
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box">
<span>小许🎵</span>
<img src="pic1.jpg">
<span>小许🎵</span>
</div>
</body>
</html>
父盒子高度 200px，基线大概在黄色线的位置，span标签正好在基线中间。图片的基线大概是蓝色线的位置。现在想要让图片基线跟父盒子基线重合。需要用到 vertical-align 属性。
（ 基线相关网络资料：https://www.cnblogs.com/keyi/p/5841348.html ）
（ vertical-align ：https://www.runoob.com/cssref/pr-pos-vertical-align.html ）
可以看到 vertical-align 默认属性值为 baseline。
下面几个是需要了解的属性值：
实现了文字跟图片都居中。
