两个子元素重叠居中
Posted 蝎子莱莱与车轮滚滚
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两个子元素重叠居中相关的知识,希望对你有一定的参考价值。
1 <view class="item-level"> 2 <text class="level">13</text> 3 <image 4 class="image-level" 5 src="/assets/images/person-level.png" 6 /> 7 </view>
css
1 .item-level { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 } 6 7 .image-level { 8 width: 80rpx; 9 height: 55rpx; 10 } 11 .level { 12 font-size: 24rpx; 13 font-weight: 700; 14 color: #ffffff; 15 position: absolute; 16 }
以上是关于两个子元素重叠居中的主要内容,如果未能解决你的问题,请参考以下文章
web前端练习30----Css,布局(文档流,浮动,清除浮动,浮动高度塌陷,垂直外边距重叠问题,定位,层级,居中,flex布局及练习)