Vertically aligning text in table cell with adjoining span

Question

Fiddle: http://jsfiddle.net/oh78n5r5/17/

I am attempting to render a parenthesized expression using a table with one row and three cells: left, middle and right, where left and right are parentheses and middle is the expression. I would like both the parentheses and the expression text to be properly vertically aligned with an adjoining span representing a function name. So the final result should look like: f(x).

My current approach is to set vertical-align: middle on the table. This aligns the parentheses fairly well, but unfortunately, in chrome the expression text is below the function name.

Is there any css that will allow me to use the HTML I am currently using and will work cross-browser? (The HTML is good because it will allow parentheses to grow with large expressions like fractions).

The html I am using is the following:

<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>

my current css is (paren images are stubbed out):

.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

Please check this: jsFiddle . This is the new CSS which I added:

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