Html 将表格单元格中的文本与相邻跨距垂直对齐

小提琴：

我试图使用一个包含一行和三个单元格的表来呈现一个带括号的表达式：left、middle和right，其中left和right是括号，middle是表达式。我希望括号和表达式文本与表示函数名的相邻跨距垂直对齐。最后的结果应该是：f（x）

我目前的方法是在桌子上设置垂直对齐：中间对齐。这很好地对齐了括号，但不幸的是，在chrome中，表达式文本位于函数名下面

是否有任何css允许我使用当前使用的HTML并跨浏览器工作？（HTML很好，因为它允许括号与大表达式（如分数）一起增长）

我使用的html如下所示：

<span>f</span>
<table class="paren">
  <tr>
    <td class="left"></td>
    <td class="mid"><span class="x">x</span></td>
    <td class="right"></td>
  </tr>
</table>

---

请检查此项：。这是我添加的新CSS：

.f {
    vertical-align: middle;
}
.mid {
    text-align: center;
}

---

谢谢你。我正在研究这种方法，但可能无法向“f”元素添加任何样式。如果你有一个解决方案，没有样式的元素，我将不胜感激。已编辑的问题和代码以删除.f类。需要对每个.paren应用相同的样式。见：

.f {
    vertical-align: middle;
}
.mid {
    text-align: center;
}