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

关键代码

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

  

 

  
1
  
2
  
3
  
4
 

完整代码

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

  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
 

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

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

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/124165756