在html中如何在选项卡的中上部添加一个圆圈？

我正在设计一个圆圈在我的标签顶部中间，但我的标签将自动增加的内容，我使用md标签创建标签的基础上

我用css创建了一个圆圈

.bubble_circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 15px;
    }

---

请帮我解决这个问题。过去的一天，我试图将圆圈设置在选项卡的中上部，但我可以这样做。

使用

位置

获得相同的结果

下面是一个例子

.tab{
宽度：100%；
高度：自动；/*您可以根据需要进行更新*/
背景：番茄；
位置：相对位置；
填充物：5px；
}
.泡泡圈{
宽度：20px；
高度：20px；
边界半径：50%；
字体大小：20px；
线高：15px；
位置：绝对位置；
背景：黑色；
顶部：0px；
左：50%；
转换：转换（-50%，0）；
/*z-索引：值；如果需要，并根据需要更改*/
}
.气泡圈+p{
填充顶部：15px；
}

Lorem ipsum dolor sit amet，奉献精英。最低限度应为最低限度。动物实验中的非假设性死亡，动物实验中的非假设性死亡。

您也可以使用

flexbox

轻松解决此问题。使用

显示：flex和
对齐内容：中心
将子气泡居中放置在选项卡顶部。不需要职位等


.tab{
宽度：100%；
高度：50px；
背景：灰色；
显示器：flex；
弯曲方向：立柱；
}
.居中{
显示器：flex；
证明内容：中心；
}
.泡泡圈{
宽度：20px；
高度：20px；
边界半径：50%；
字体大小：20px；
线高：15px；
背景色：白色；
}

标签

希望这有帮助


*{
填充：0；
保证金：0；
}
.标签{
背景颜色：浅灰色；
左边框：薄实心暗灰色；
右边框：薄实线暗灰色；
边框顶部：薄实色暗灰色；
边界半径：5px；
显示：内联块；
垫面：1米；
位置：相对位置；
}
.气泡圈{
位置：绝对位置；
顶部：1px；
左：50%；
转换：转换（-50%，0）；
宽度：15px；
高度：15px；
边界半径：50%；
背景色：红色；
}

表1

尝试将.bubble\u circle元素定位为绝对---.bubble\u circle{position:absolute；}请使用fiddle或其他工具创建一个实时演示。我们很容易理解你们的问题，我试过用{position:absolute}但是气泡没有根据选项卡大小@chandra shekharmake的父元素在中心对齐。气泡圆到位置：相对和设置。气泡圆位置：绝对并尝试如果选项卡数量较多，且选项卡大小将根据选项卡中的内容自动增加或减少，则气泡位置将改变。不，这是停留在中间的顶部，你可以玩制表高度。我想这会对我有帮助。多谢各位@LKG