Search code examples
htmlcsscentering

displayed equations with equation numbers in HTML (alignment problems)

I am trying to typeset a displayed equation in HTML, together with an equation number. The equation is rendered as an image, the equation number is given as text:

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

The result is meant to look similar to how LaTeX would typeset a displayed equation:

  • The equation number and the formula should be vertically centred, i.e. the middle of (1.7) should vertically align with the middle of the image. I can achieve this using vertical-align: middle.

  • the image for the formula should be horizontally centred within the width of the surrounding paragraph. I can achieve this using text-align: center.

  • The left edge of the equation number should horizontally align with the left edge of the surrounding paragraph. I can achieve this using float: left, but only for the price of breaking the vertical alignment.

I can get either the vertical or the horizontal alignment right (see this jsfiddle), but I failed to get both horizontal and vertical alignment to work simultaneously. How can I get the equation number to display correctly?

The result is meant to be portable to different ebook readers, so I cannot use JavaScript to move things around.

Solution

  • I have made couple of changes to your code. See this JSFiddle 

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

.eqn {
  vertical-align: middle;
}

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

    I hope this helps.

    Amrinder