Html 如何在大小未知的文本父对象上居中放置伪元素

我试图在段落中出现的数字周围画圆圈。数字将是一位或两位数字。我喜欢圆圈不影响我的文本的行高

我可以硬编码绝对定位，如果数字是一个数字，它可以正常工作，但是相同的值对于两个数字不起作用。是否有一种方法可以定位伪元素，使其无论是一位还是两位数字都居中

.container{
最大宽度：600px；
填充：32px；
背景色：#DDDDDD；
}
p{
字号：1.15em；
字体系列：Proxima Nova，无衬线；
线高：1.5；
}
.数字选择--在文本中{
显示：内联块；
位置：相对位置；
z指数：1；
利润率：0.10px；
}
.number pick--in text:：before{
内容：''；
位置：绝对位置；
z指数：-1；
宽度：1.5em；
高度：1.5em；
顶部：-1px；
右：-12px；
边界半径：50%；
边框：1px实心#79818B；
}

布兰登用自己的生日作为他的幸运彩票号码。他挑选
1.
3.
9
12
43
4.
他在当地一家便利店买了票，第二天发现自己中了1.5亿美元的头奖。

您实际上不需要伪垂直对齐+大小即可

vertical align

CSS属性设置内联或表格单元格框的垂直对齐方式

.container{
最大宽度：600px；
填充：32px；
背景色：#DDDDDD；
}
p{
字号：1.15em；
字体系列：Proxima Nova，无衬线；
线高：1.5；
}
.数字选择--在文本中{
显示：内联块；
垂直对齐：中间；/*根据需要调整值*/
文本对齐：居中；
宽度：1.5em；
线高：1.5em；
边界半径：50%；
边框：1px实心#79818B；
}

布兰登用自己的生日作为他的幸运彩票号码。他挑选
1.
3.
9
12
43
4.
他在当地一家便利店买了票，第二天发现自己中了1.5亿美元的头奖。

使用标准方法：

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

.container{
最大宽度：600px；
填充：32px；
背景色：#DDDDDD；
}
p{
字号：1.15em；
字体系列：Proxima Nova，无衬线；
线高：1.5；
}
.数字选择--在文本中{
显示：内联块；
位置：相对位置；
z指数：1；
利润率：0.10px；
}
.number pick--in text:：before{
内容：''；
位置：绝对位置；
z指数：-1；
宽度：1.5em；
高度：1.5em；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
边界半径：50%；
边框：1px实心#79818B；
}

布兰登用自己的生日作为他的幸运彩票号码。他挑选
1.
3.
9
12
43
4.
他在当地一家便利店买了票，第二天发现自己中了1.5亿美元的头奖。

这几乎是完美的，但两位数和一位数元素之间的间距不相等。是否有办法定位伪元素，使其无论是一位数还是两位数都居中？这是你的问题。如何将伪元素集中在大小未知的文本父对象上是您的问题标题。我的答案正是如此，与挑选的答案相反。