css实现同一行文字但字体大小不同的垂直居中办法

有时候我们在写样式的时候，会发现虽然是同一行文字，但是文字的大小不一致，此时文字的对齐方式并不居中，而我们又希望其能居中对齐。

首先我们来做个测试，有以下代码

<style>
* { padding: 0; margin: 0;}
.row { background-color: #cccccc;}
.zongjia {font-size: 26px; background-color: #c9e2b3;}
.price {font-size: 36px; background-color: #a6e1ec;}
.sheng { font-size: 22px; background-color: #ff7800;}
</style>
<div class="row">
    <span class="zongjia">总价</span><span class="price">200万</span><span class="sheng">最多省20万</span>
</div>

放大可以看到：最外层class为row的元素的高度=里面最大字体元素的高度；但是两边的小的为啥下面还留点儿空隙？为啥不居上或者居底显示呢？这里不是很明白，希望明白人来教教我。。。。。。

现在呢，我们想把它们垂直居中对齐，方法也很简单：给父元素和每个子元素添加 "vertical-align: middle;"

样式如下：

<style>
* { padding: 0; margin: 0;}
.row { background-color: #cccccc;}
.zongjia {font-size: 26px; background-color: #c9e2b3; vertical-align: middle;}
.price {font-size: 36px; background-color: #a6e1ec; vertical-align: middle;}
.sheng { font-size: 22px; background-color: #ff7800; vertical-align: middle;}
</style>
<div class="row">
    <span class="zongjia">总价</span><span class="price">500万</span><span class="sheng">最多省20万</span>
</div>

看效果如下：