Html 如何使用CSS在圆圈内显示价格？

我有以下代码：

。特价{
文本对齐：居中；
背景色：#2e566e；
}
.特价{
边界半径：50%；
背景色：#56c243；
颜色：#fff；
字号：700；
字号：18px；
高度：150像素；
宽度：150px；
显示：内联块；
文本对齐：居中；
边框：1px实心；
}
.报价.符号{
垂直对齐：顶部；
}
.报价.美元{
字体大小：60px；
}
.报价.美分{
垂直对齐：顶部；
}

34.99美元+税金

要解决这些问题，您可以添加

线高：2.6至
。特价。优惠

并将
和
中的
垂直对齐
更改为
中间

这应该能奏效。
只需按照您的意愿使用
行高的值即可获得所需的输出。
这有多种垂直居中文本的技术

我在报价中添加了另一个div
price
，因为报价实际上代表了泡沫，因此如果没有自己的上下文，试图在报价中定位文本是很困难的

<div class="offer">
  <div class="price">
    <sup class="symbol">$</sup><span class="dollars">34</span><sup class="cents">.99</sup><span class="tax">+ TAX</span>
  </div>
</div>


34.99美元+税金


看看这个。我还将文本放大了一点，并将+TAX放在一个新行上，以将内容分解一点。
如果您以后想更改价格和单位，这里有一个包含拆分内容的版本。否则，您也可以将美元单位和美分放入伪货币前后

我喜欢用flex来处理这样的事情<代码>显示：flex；对齐项目：居中使内容在剖面圆中垂直和水平居中。
显示：flex使sup标记水平居中


*{
框大小：边框框；
}
.价格{
宽度：55px；
高度：55px；
边界半径：50%；
背景颜色：绿色；
显示器：flex；
对齐项目：居中；
颜色：#fff；
}
.价格，.价格*{
保证金：0；
填充：0；
}
.价格p{
字体大小：24px；
显示器：flex；
保证金：0自动；
}
.价格{
字体大小：12px；
}


$
34
.99

删除您定义的垂直对齐：顶部，并将其添加到圆
填充顶部：34px；框大小：边框框 @ TeMaMiaFIF谢谢，但是，$符号和美分将不会在顶部，看起来奇怪。考虑线高度对齐，也改变到<代码>中< /代码>使它看起来怪异。我需要它与美元数字的顶部对齐。那太好了，现在就可以了。我喜欢你为这个价格又做了一次跳水。