gpt4 book ai didi

「CSS」利用flex设置字体大小不一的文字水平垂直居中,并且文字以字体底部对齐

转载 作者:知者 更新时间:2024-03-13 05:50:55 30 4
gpt4 key购买 nike

如何实现以下情景:

外部盒子先使用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;
		}
	}
}

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com