html - 居中、盒装的数学方程式

Question

我正在尝试使用 MathML 作为 HTML5 的一部分来制作居中的盒装数学方程式。问题是盒子。如果我在我的 div 元素上放置一个边框，边框足够高，但它一直延伸到屏幕的左侧和右侧。如果我在我的数学元素上放置一个边框，它的宽度是正确的，但对于多行表格中的元素来说不够高。

<div align="center" style="border: 1px solid #000;">
  <math style="border: 1px solid #000;"><mi>x</mi><mfenced open="{" close=""><mtable>
    <mtr><mtd><mtext>row 1</mtext></td></mtr>
    <mtr><mtd><mtext>row 2</mtext></td></mtr>
  </mtable></mfenced></math>
</div>

为什么元素有这么奇怪的尺寸？他们不应该都是他们内容的大小吗？如何创建一个刚好足以容纳文本的框，而不给任何元素一个明确的大小？

(抱歉缺少图片。我上传了一张，但我没有适当的声誉来发布它。)

谢谢。

Answer 1

<div>是 block 元素，因此它将填充当前父框的完整宽度。您可以将其设置为使用 display: inline-block;以适应其内容的宽度:

<div align="center" style="border: 1px solid #000; display: inline-block;">
  <math><mi>x</mi><mfenced open="{" close=""><mtable>
    <mtr><mtd><mtext>row 1</mtext></mtd></mtr>
    <mtr><mtd><mtext>row 2</mtext></mtd></mtr>
  </mtable></mfenced></math>
</div>

Example Fiddle

---

此外，在您的代码中您使用 </td>而不是 </mtd> .