关键代码
/* 每个子元素增加对齐属性 */.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】同一行文字，字体大小不同，实现垂直居中
如果觉得《CSS：一行上不同大小的文字上下垂直居中对齐》对你有帮助，请点赞、收藏，并留下你的观点哦！
