关键代码
/* 每个子元素增加对齐属性 */
.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