显示方程式，方程式编号在 HTML 中（对齐问题）

Question

我正在尝试排版 HTML 中显示的方程以及方程编号。方程呈现为图像，方程编号以文本形式给出：

<p>some text
<span style="display: block">
  <span>(1.7)</span>
  <img alt="[some equation]" src="img.png">
</span>
some more text.</p>

结果看起来类似于 LaTeX 排版显示公式的方式：

方程号和公式要垂直居中，即(1.7)的中间要垂直居中对齐。我可以使用 vertical-align: middle.
公式的图像应在周围段落的宽度内水平居中。我可以使用 text-align: center.
公式编号的左边缘应与周围段落的左边缘水平对齐。我可以使用 float: left 实现此目的，但代价是打破垂直对齐方式。

我可以使垂直或水平对齐正确（请参阅 this jsfiddle），但我未能使水平和垂直对齐同时工作。我怎样才能让公式编号正确显示？

结果是为了可以移植到不同的电子书阅读器，所以我不能使用 JavaScript 来移动东西。

Answer 1

我对您的代码进行了一些更改。看到这个 JSFiddle

.displayed {
  margin: 1ex auto;
  display: table;
  text-align: center;
  width: 100%;
}

.eqn {
  vertical-align: middle;
}

.eqno {
  display: table-cell;
  text-align: left;
}

希望对您有所帮助。

Amrinder

显示方程式，方程式编号在 HTML 中（对齐问题）

displayed equations with equation numbers in HTML (alignment problems)

html

css

centering