两个span标签再同一行，高度不一样的解决办法【入坑篇】

因为项目原因，需要再一个div中显示两个span标签，正常情况下，我们可以直接这么去写代码【如下】
样式我就不写了

<div class="class_name">
	<span class="class1">文本1</span>
	<span class="class2">文本2</span>
</div>

.class1{
	vertical-align:middle;
}

.class2{
	vertical-align:middle;
}

but，会出现两个span高度不一样的情况，两个span不再同一个水平线上。
What??【黑人问号？？？】

士可忍熟不可忍，经过多方寻找验证，目前的解决方法如下：
再span 的样式中添加这么一句话： vertical-align:middle;

添加完这句话之后，我保证两个span会服服帖帖的听你的命令，显示成同一个高度。

办法二、
父元素样式中添加如下代码：

<div class="class_name">
	<span class="class1">文本1</span>
	<span class="class2">文本2</span>
</div>

.class_name{
	display: flex;
	justify-content: center;
}