Html 使两条平行线从左到右垂直位于内容的中心

我面临一个问题，可能不是什么大问题，但我不知道该怎么办

我想在div的内容

左（小计）

和

右（$200）

有人能帮我吗

我已经试过了，但是我不能使它垂直居中

附加我希望它看起来如何的屏幕截图：

我尝试过的代码片段：

.row{
显示器：flex；
}
.分割线{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：右对齐；
边框：2倍纯红；
高度：7px；
}

引导示例

小计


小计

您可以通过为

行提供
对齐项目：居中
属性并从
内的
p
标记中删除
页边距
。开始行
可以使用CSS flex align center选项进行此操作


.row{
显示器：flex；
对齐项目：居中；
}
.mb-0{
页边距底部：0！重要；
}
.分割线{
边框顶部：2件纯红；
底部边框：2倍纯红；
高度：7px；
背景色：薰衣草色；
}

引导示例

小计


小计

看起来像一个巨大的等号，所以让我们把它变成一个巨大的等号。这样，我们可以确保它将与其他字符垂直对齐，而无需我们进行任何其他垂直定位

实现这一点的方法是将=字符按标准字体大小放在中间列中，但按x方向缩放。我们在里面放了一个巨大的刻度，这样它就可以覆盖整个中心柱，不管它有多宽。当然，这不会被视为溢出设置为隐藏



引导示例
* {
保证金：0；
填充：0；
文本对齐：居中；
}
p、 宽字体{
变换：比例（10000,1）；
颜色：金色；
溢出：隐藏；
}
小计

=
小计