CSS：一行上不同大小的文字上下垂直居中对齐

关键代码

/* 每个子元素增加对齐属性 */
 .middle {
    vertical-align: middle;
}

完整代码

<style>
        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .row {
            background-color: #cccccc;
        }

        .row+.row {
            margin-top: 40px;
        }

        .title {
            font-size: 26px;
            background-color: #c9e2b3;
        }

        .price {
            font-size: 36px;
            background-color: #a6e1ec;
        }

        .label {
            font-size: 22px;
            background-color: #ff7800;
        }

        .middle {
            vertical-align: middle;
        }
    </style>

    <!-- 默认是不对齐的 -->
    <div class="row">
        <span class="title">总价</span>
        <span class="price">200万</span>
        <span class="label">最多省20万</span>
    </div>

    <!-- 垂直方向居中对齐 -->
    <div class="row">
        <span class="title middle">总价</span>
        <span class="price middle">200万</span>
        <span class="label middle">最多省20万</span>
    </div>

在线demo: https://mouday.github.io/front-end-demo/one-line-text.html

参考
【CSS】同一行文字，字体大小不同，实现垂直居中