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

关键代码

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

完整代码

        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;
        }
    

    
    
        总价
        200万
        最多省20万
    

    
    
        总价
        200万
        最多省20万
    

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

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