Как выровнять текст по горизонтали?

Question

Я пытаюсь выровнять символы эквивалентности Юникода по горизонтали, которые смещаются при изменении размера: 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

Добавьте следующие 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 2

Вы можете сделать это с помощью 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 3

Вы были близки. Попробуйте поместить это в свой файл CSS.

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