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

Question

小提琴：http://jsfiddle.net/oh78n5r5/17/

我试图使用一个带有一行和三个单元格的表来渲染带括号的表达式：左，中，右，左右两边是圆括号，中间是表达式。我希望括号和表达式文本与表示函数名称的相邻跨度正确垂直对齐。所以最终的结果应该是：f（x）。

我目前的做法是在桌面上设置vertical-align：middle。这样可以很好地对齐括号，但不幸的是，在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是（paren图像被删除）：

.left, .right {  background-color: gray; }

.paren { display: inline-table; border-collapse: collapse; border-spacing: 0; }
.paren .left, .paren .right { padding: 0px; width: .35em; }
.mid{ }

body { font-size: 24px }

Answer 1

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

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