Html 居中、装箱的数学方程

我正在尝试使用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>

x
第1行
第2排

为什么元素的大小如此奇怪？它们不应该都是内容物的大小吗？我如何创建一个足够大的框来容纳文本，而不给任何元素一个明确的大小

（对没有图片表示歉意。我上传了一张，但我没有合适的声誉来发布它。）

谢谢。

是一个块元素，因此它将填充当前父框的整个宽度。您可以将其设置为使用

display:inline块以适合其内容的宽度：

<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>


x
第1行
第2排



此外，在代码中使用
而不是
 是块元素，因此它覆盖页面的整个宽度。您可以在CSS中将其显示属性设置为inline，然后它将根据您的需要工作。可能您需要一个额外的元素来覆盖内部元素

display: inline;

非常感谢。这很有效。（几分钟后，我会接受答案。）你知道为什么数学元素的高度不包含所有内容吗？不，但乍一看，我认为这是一个bug。你使用的浏览器和版本是什么？在Mac OS 10.9.5上的Firefox 37.0.2和Safari 7.1.5中，小提琴的边框高度在我看来还行。@DaveBarton我认为OP指的是他的方法，而不是我的解决方案。你检查过Op的代码了吗？没错，Op的代码显示Firefox中有一个bug。我鼓励他报告此事。