如何水平对齐表格中的文本？答案

【问题标题】：How to horizontally align text in tables?如何水平对齐表格中的文本？
【发布时间】：2019-02-04 23:58:49
【问题描述】：

我试图水平对齐 unicode 等价符号，在调整大小时会脱轨：https://jsfiddle.net/r6bxgem3/26/

尝试vertical-align:middle 无济于事。当前与预期：

有什么解决办法吗？非常感谢您的帮助。

.arr {color: red; font-size: 200%; }
.lft {float: right; display: inline;}
* {box-sizing: border-box;}

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<table><tr><td><span class="lft">
    
\(1+3+2\ \)                                                         
</span></td><td><span class="arr">&#11020;</span></td><td>
\(\ 6+2-2\)                                                           
</td></tr>
</table>

编辑：增加调整大小以强调垂直脱轨。添加了说明图。

【问题讨论】：

我不确定我是否理解。我们在这个 sn-p 中看到问题了吗？预期的结果是什么？
是的，sn-p 在我看来也不错。你希望它看起来如何？
垂直出轨；见编辑

标签： html css html-table alignment

【解决方案1】：

您可以使用line-height: 100%：

.arr {color: red; font-size: 200%; line-height: 100%}

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>

<table>
  <tr>
    <td><span class="lft">\(1+3+2\ \)</span></td>
    <td><span class="arr">&#11020;</span></td>
    <td>\(\ 6+2-2\)</td>
  </tr>
</table>

作为旁注，您可以省略其他规则，甚至可以省略 span 元素，因为它们的存在没有任何影响。

【讨论】：

【解决方案2】：

添加以下 css 来解决这个问题

span {
line-height: 50px;
}

span {
line-height: 50px;
}
.arr {color: red; font-size: 200%; }
.lft {float: right; display: inline;}
* {box-sizing: border-box;}

<script type="text/javascript" async src=
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=
TeX-MML-AM_CHTML"></script>
<table><tr><td><span class="lft">
    
\(1+3+2\ \)                                                         
</span></td><td><span class="arr">&#11020;</span></td><td>
\(\ 6+2-2\)                                                           
</td></tr>
</table>

请阅读此https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

【讨论】：

【解决方案3】：

你很亲密。试着把它放在你的 CSS 文件中。

td 
{
    vertical-align: middle;
    text-align: center; 
}

【讨论】：