居中的盒装数学方程答案

【问题标题】：Centered, boxed math(s) equations居中的盒装数学方程
【发布时间】：2015-04-26 08:17:31
【问题描述】：

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

为什么元素有这么奇怪的尺寸？它们不应该都是它们内容的大小吗？如何在不为任何元素指定明确大小的情况下创建一个足够大以包含文本的框？

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

谢谢。

【问题讨论】：

标签： html css mathml

【解决方案1】：

<div> 是一个块元素，因此它将填充当前父框的完整宽度。您可以将其设置为使用 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>。

【讨论】：

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

【解决方案2】：

是一个块元素，因此它覆盖了页面的整个宽度。您可以在 CSS 中将其显示属性设置为内联，然后它将按您的意愿工作。可能你需要一个额外的元素来覆盖内部元素。

display: inline;

【讨论】：