两个子元素重叠居中

Posted 蝎子莱莱与车轮滚滚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两个子元素重叠居中相关的知识,希望对你有一定的参考价值。

html

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布局及练习)

ConstraintLayout 在父级中垂直居中,没有重叠

CSS代码片段

CSS代码片段

如何修复重叠的片段

导航上的片段生命周期重叠