Неправильное вертикальное выравнивание в WebKit встроенных элементов

У меня есть небольшой список определений, который я бы хотел сосредоточить на странице как по горизонтали, так и по вертикали в четырех столбцах. У меня есть html -element для display: table и body для display: table-cell; с vertical-align: middle; ,

Смотрите этот скрипт. Если вы измените font-size в строке 27 на 4em; (или что-то большее, чем 1em), вы увидите, что в Chrome контент переходит в неправильное положение, пока он был прав раньше. В IE размер шрифта не имеет значения, он остается в правильном положении в любом случае.

Если вы установите dl для display: block, он работает и в обоих браузерах, но мне визуально нужно, чтобы они отображались в строке.

Я делаю что-то неправильно или это ошибка в Chrome. Если да, то как я могу обойти это?