「CSS」利⽤flex设置字体⼤⼩不⼀的⽂字⽔平垂直居中，并且⽂字以字体底部
对齐
如何实现以下情景：
外部盒⼦先使⽤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;css设置文字垂直居中
display: flex;
justify-content: center;
align-items: center;
.content{
display: flex;
align-items: baseline;
.num{
font-size: 50rpx;
}
.unit{
font-size: 20rpx;
}
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。