我在尝试对HTML数学表格中的文本进行对齐时遇到了困难。

如果你运行下面的代码片段，你将看到一个简单的表格，只有两行，每行两列。我的问题是，如何把左列的文本右对齐？

把右列的文本左对齐只是把 text-align: left 加到右侧的 <td> 元素上而已。

然而，当我把 text-align: right 加到左侧的 <td> 时，令我吃惊的是，它把对齐从居中改为了左对齐，而不是右对齐。

.math_td_left {
    text-align: right;
}

.math_td_right {
    text-align: left;
}

<math>
<mtable>
  <mtr>
    <mtd class="math_td_left">a + 7</mtd>
    <mtd class="math_td_right"> = b</mtd>
  </mtr>
  <mtr>
    <mtd class="math_td_left">c</mtd>
    <mtd class="math_td_right"> = d - 8</mtd>
  </mtr>
</mtable>
</math>

解决方案

这是因为浏览器在显示MathML的方式上各不相同。你在使用哪种浏览器？

如果你使用的是WebKit浏览器，你可以直接为它添加支持：

.math_td_left {
    text-align: right;
    text-align: -webkit-right;
}

.math_td_right {
    text-align: left;
    text-align: -webkit-left;
}

如果它不起作用，你也可以按评论中的建议，把 display:block; 添加到你的CSS中。