Вертикальное выравнивание текста в ячейке таблицы с прилегающим пролете

Question

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

Я пытаюсь вынести в скобки выражение, используя таблицу с одной строкой и тремя ячейками: левый, средний и правый, где левый и правый в круглые скобки и Среднее - выражение. Я хотел бы, чтобы скобки и текст выражения были правильно выровнены по вертикали с соседним диапазоном, представляющим имя функции. Таким образом, конечный результат должен выглядеть так: 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> 

мой текущий КСС (скобка изображения затушил):

.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; 
}