html - Vertically aligning text in table cell with adjoining span -

html - Vertically aligning text in table cell with adjoining span -

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

i attempting render parenthesized look using table 1 row , 3 cells: left, middle , right, left , right parentheses , middle expression. both parentheses , look text vertically aligned adjoining span representing function name. final result should like: f(x).

my current approach set vertical-align: middle on table. aligns parentheses well, unfortunately, in chrome look text below function name.

is there css allow me utilize html using , work cross-browser? (the html because allow parentheses grow big expressions fractions).

the html using 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 (paren images 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 }

please check this: jsfiddle. new css added:

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

html css math vertical-alignment