如何实现以下情景:
外部盒子先使用display:flex; justify-content: center; align-items: center; 将文字所在的内容盒子水平垂直居中于外部盒子中间,再将内容盒子display:flex; align-items: baseline; 将内容盒子里面的文字基于第一个文字的底部对齐。
html部分
<div class="box">
<div class="content">
<div class="num">8</div>
<div class="unit">折</div>
</div>
</div>
css部分
.box{
background-color: #4773DC;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
.content{
display: flex;
align-items: baseline;
.num{
font-size: 50rpx;
}
.unit{
font-size: 20rpx;
}
}
}