MathJax 2.7.7版本含换行公式无法正常居中对齐问题咨询

解决方案 #

你可以按照以下步骤调整，即可实现「步骤块整体居中、内部按规则对齐」的预期效果：

1. 调整公式写法，使用aligned对齐环境 #

放弃手动打空格+硬换行的写法，改用AMSmath提供的aligned环境包裹整个步骤内容，既可以保证内部对齐规范，也能让整个步骤块被MathJax识别为单个公式单元，不会被拆分为多行单独渲染：

$\begin{aligned}
&\quad\quad Step\ 1\\
=\quad&\quad\quad \langle \text{explanation}\rangle\\
&\quad\quad Step\ 2
\end{aligned}$

其中&是对齐标记，你可以根据需要调整对齐位置，\quad是LaTeX标准空格单位，比手动输入空格兼容性更好。

2. 补充CSS样式修复居中异常 #

2.7.7版本对多行行内公式的渲染默认会占满父容器宽度，导致父级的居中设置失效，补充以下全局CSS即可解决：

.MathJax {
    display: inline-block !important;
}

如果后续你愿意改用双$$块级公式写法，只需要保留aligned环境，配合你现有配置里的displayAlign: 'center'，也能直接实现整体居中的效果，不会出现每行单独居中的问题。

可选优化：调整输出格式规避竖线问题 #

你升级版本是为了解决右侧竖线问题，可以把MathJax配置里的输出格式从HTML-CSS换成兼容性更好的CommonHTML，彻底避免渲染异常：

MathJax.Hub.Config({
    // 其他原有配置全部保留
    jax: ["input/TeX","output/CommonHTML"],
    // 把原来的"HTML-CSS"配置块替换为如下CommonHTML配置
    "CommonHTML": {
        styles: {'.MathJax_Display': {"margin": 0}},
        linebreaks: { automatic: true }
    }
});

内容的提问来源于stack exchange，提问作者EGPRC