如何在表格中水平对齐文本？

Question

我试图水平对齐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> 

编辑：增加了尺寸以强调垂直脱轨。 添加了说明性图片。

Answer 1

您可以使用line-height: 100%来做到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 元素 ，因为它们的存在不起作用。

Answer 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

Answer 3

你近了 尝试将其放在您的CSS文件中。

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