右边距中的HTML编号公式

我有以下HTML代码：

标题
MathJax.Hub.Config（{
tex2jax:{
inlineMath:[['$'，'$']，[“\\（“，“\\）”]，
processEscapes：正确
}                                                                                                                     
});                                                                                                                       
一些文本，在中间，我想要一个等式：
$$\intop_0^1f（x）dx=\pi\text{.}$$（1）
现在正文继续

使用此CSS：

。方程式\u编号{
文本对齐：右对齐；
}
方程式{
显示：块；
边框样式：虚线；
宽度：90%；
}

由此产生（虚线框仅用于调试目的）：

我想展示（1）与这个例子中的等式对齐：

我已经为此挣扎了一段时间，我已经没有想法了。我只是从HTML和CSS开始。我如何才能做到这一点？

需要将

和

标签包装在flex容器中。Flexbox是CSS的一种布局功能，它将容器中的内容对齐。阅读更多关于它的信息

---

此外，您不应在

标签内放置

。关闭第一个段落标记，然后在中间div下添加一个开始段落标记。

我建议使用

display:table

以在保持对齐的同时获得对宽度的更多控制

。方程{
显示：表格；
宽度：100%；
}
.方程式内容，
.方程_数{
显示：表格单元格；
}
.方程式内容{
宽度：90%；
}
.方程_数{
文本对齐：右对齐；
}

一些文本，在中间我想要一个等式：
$$\intop_0^1f（x）dx=\pi\text{.}$$
(1)
现在文本继续

<div class="center">
    <equation id="my first equation" style="">$$\intop_0^1f(x)dx=\pi\text{.}$$</equation>
    <div class="equation_number">(1)</div>
</div>

.center {
    display: flex;
    align-items: center;
}