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中的方程编号显示方程式（对齐问题）

1 个答案: