当有换行符时，MathJax 2.7.7 无法在网页上正确居中公式

Question

我在网页上有这样的东西：

MathJax正在渲染的“定理”和“步骤1”到“步骤2”的块部分。我使用的是 2.3 版，但为了避免出现在右侧的垂直线，我将其升级到 2.7.7。但是现在公式在包含换行符时不会居中；它们左对齐：

在 HTML 代码中我有这样的配置：

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type="text/x-mathjax-config">
            MathJax.Hub.Config({
                extensions: ["tex2jax.js","[Contrib]/forminput/forminput.js"],
                jax: ["input/TeX","output/HTML-CSS"],
                tex2jax: {
                    inlineMath: [ ['$','$'], ["\(","\)"] ],
                    displayMath: [ ['$$','$$'], ["\[","\]"] ],
                    processEscapes: true,
                    processEnvironments: true,
                },
                TeX: {extensions: ["AMSmath.js","AMSsymbols.js"]},
                displayAlign: 'center',

                "HTML-CSS": {
                    styles: {'.MathJax_Display': {"margin": 0}},
                    linebreaks: { automatic: true }
                }
            });
        </script>
        <script 
            type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML"
        />

图片上显示的部分是：

<body>
    ...
    <div class="col-lg-7" style="padding-right: 0px;">
        <article class="proof">
            <h5 id="formula" style="width:100%; height: 100%">
                <center>$Theorem$</center>Proof:<br>
                <center>$~~~~~~Step 1\=~~~~~~\langle \text{explanation}\rangle\~~~~~~Step 2$</center>
            </h5>
        </article>

请注意，我使用单个 $ 作为分隔符。如果我将它们加倍（$$ ... $$），那么每一行都以其自身为中心，如下所示，这不是所需的结果。从“第 1 步”到“第 2 步”的部分应作为一个单独的块，其中的步骤始终与“解释”部分的左侧对齐。

当前代码分享在codesandbox: https://codesandbox.io/s/sweet-gates-80vx8?file=/index.html

Answer 1

背景

Mathjax 支持在 HTML 和浏览器中使用 Latex、AsciiMath 和 MathML。
Mathjax 不支持纯 Latex 或 Tex 环境中可能的所有内容，而是支持添加了一些附加功能的数学子集。
将 Latex（在您的情况下）添加到 DOM，然后 MathJax 以一种最终形成复杂元素层次结构的方式对其进行处理。

您的用例

由于Mathjax需要配合现有的DOM，在Latex中使用换行符是一个典型的出错场景。换行符主要不是数学功能，我记得在纯 Latex 环境中的数学模式下使用常规 Latex 换行符也可能很麻烦。由于您可以在 HTML 中进行布局，最好让 Mathjax 渲染数学，然后在 HTML 中进行不同 Mathjax 部分的实际布局。在您的情况下，这意味着从您的 Latex 中排除换行符，而是将其分成使用 HTML.

布局的单独元素

将 h1 标签之间的内容替换为：

<div
    style="
        display: flex;
        flex-direction: column;
        align-items: center;
      "
>
    <span>$Theorem$</span>
    <p style="width: 100%;">Proof:</p>
    <span>$Step1$</span>
    <span>$~~~~~~~~~~~~=~~~~~~~~~~~~\langle\text{explanation}\rangle$</span>
    <span>$Step2$</span>
</div>

现在，我们使用 HTML 来布局数学的单独部分，只将数学的呈现留给 Mathjax。您可以尝试一下，如果需要，还可以添加其他样式和格式。在等号的左边或右边添加更多的波浪号，将该行向右推。

当 Mathjax 遇到一块 Latex 时，它会将其转换为一块 HTML。我的信念是，当您在代码中添加换行符时，它会使 Mathjax 将块的宽度设置为 100%，而当您将 100% 宽的内容居中时，什么也不会发生。 INSIDE 这个块，根本没有对齐，所以行最终左对齐（默认）。这意味着即使 Mathjax 没有将宽度设置为 100%，您也无法通过将结果块包装在 <center> 标记中来将结果块居中 INSIDE 因为content INSIDE 它仍然是左对齐的。充其量，您会到达一个居中的块，其中的行左对齐。总而言之，您的尝试不起作用，因为您以 HTML 为中心，但是因为您在 Latex 代码中使用换行符（作为布局的一种方式），Mathjax 认为该块应该是 100% 宽，所以外部居中未按预期工作。

解决方案是要么完全使用 HTML 进行布局（如我的建议），要么通过尝试使用一些 Latex 机制启用居中（也许center 或 centering) 或使用一些数学环境，如 align 或 gather 来完成你想要的。

当有换行符时，MathJax 2.7.7 无法在网页上正确居中公式

MathJax 2.7.7 not centering formula properly on web page when there are line breaks

html

css

mathjax

背景

您的用例