解决css字体底部不对齐问题

场景描述：主标题和副标题在同一行，且文字以字体底部对齐。

效果如下：

image.png

解决方案：

【HTML】

<div class="container">
  <div class="main_title">主文字</div>
  <div class="subtitle">副文字</div>
</div>

【CSS】

.container {
    display: flex;
    align-items: baseline;
}

简单说明【MDN】

baseLine

所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

简单来说，就是设置一下 baseline就可以了